:root{
    --bg:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e5e7eb;
    --accent: #31a44b;
    --link: #00bb00;
    --max:1180px;
}

*{box-sizing:border-box}
body{
    margin:0;
    font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto;
    color:var(--text);
    background:var(--bg);
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

.container{
    max-width:var(--max);
    margin:0 auto;
    padding:0 20px;
}

/* Header */
.header{border-bottom:1px solid var(--border);}
.header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
}
.brand{
    font-weight:800;
    color: var(--accent);
}
.nav a{
    margin-left:18px;
    font-weight:600;
    color:var(--muted);
}
.nav a.active{color:var(--text);}

/* Main layout */
main{padding:34px 0 56px;}
.page{
    display:grid;
    grid-template-columns: 1fr 300px;
    gap:56px;
    align-items:start;
    margin-top: 2%;
}

/* Featured */
.featured{
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    gap:26px;
}
.featured img{
    width:100%;
    height:360px;
    object-fit:cover;
    border-radius:14px;
}
.featured .kicker{
    color:var(--muted);
    font-size:14px;
}
.featured h1{
    font-size:40px;
    line-height:1.12;
    margin:14px 0;
}
.featured .meta{
    color:var(--muted);
    font-size:14px;
    margin-bottom:18px;
}
.btn{
    display:inline-flex;
    padding:10px 16px;
    border:1px solid var(--border);
    border-radius:8px;
    font-weight:600;
}

/* BIG POSTS — 3 in a row */
.big-posts{
    margin-top:44px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:36px;
}

.big-post img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:14px;
}
.big-post .meta{
    color:var(--muted);
    font-size:13px;
    margin:10px 0 8px;
}
.big-post h2{
    margin:0;
    font-size:22px;
    line-height:1.2;
    color:var(--accent);
}
.big-post .readmore{
    display:inline-block;
    margin-top:8px;
    color:var(--muted);
    border-bottom:1px solid #cbd5e1;
    font-size:14px;
}

/* Sidebar */
.sidebar h3{
    margin:0 0 12px;
    font-size:20px;
}
.cat-list{
    list-style:none;
    padding:0;
    margin:0 0 34px;
}
.cat-list li{padding:7px 0;}
.cat-list a{
    color:var(--link);
    font-weight:500;
}

/* Latest posts */
.latest-mini{
    list-style:none;
    padding:0;
    margin:0;
}
.latest-mini li{
    display:flex;
    gap:12px;
    margin-bottom:18px;
}
.latest-mini img{
    width:78px;
    height:78px;
    object-fit:cover;
    border-radius:8px;
}
.latest-mini strong{
    display:block;
    font-weight:800;
}
.latest-mini small{
    color:var(--muted);
    font-size:13px;
}

/* Footer */
.footer{
    border-top:1px solid var(--border);
    padding:28px 0;
    color:var(--muted);
}
.footer__inner{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.footer__links a{
    margin-left:16px;
    font-weight:600;
}

/* Responsive */
@media (max-width: 1100px){
    .big-posts{grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 980px){
    .page{grid-template-columns:1fr;}
    .featured{grid-template-columns:1fr;}
    .featured img{height:260px;}
}

@media (max-width: 560px){
    .big-posts{grid-template-columns:1fr;}
}

.card-excerpt{
    margin: 8px 0 10px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured p{
    margin-top: 12px;
    max-width: 52ch;
    color: var(--muted);
    line-height: 1.6;
    font-size: 16px;
}

/* Featured: make image match the height of the text block */
.featured{
    display: grid;
    grid-template-columns: 1.15fr 1fr; /* image a bit wider */
    gap: 28px;
    align-items: stretch; /* important: equal heights */
}

.featured .media,
.featured .image,
.featured .thumb,
.featured figure{
    height: 100%;
}

.featured img{
    width: 100%;
    height: 100%;
    object-fit: cover;     /* fills height without distortion */
    border-radius: 20px;   /* keep your rounded look */
    display: block;
}