*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:#f5f5f7;
  color:#222;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

header{
  background:#163b73;
  color:#fff;
}
.top-bar{
  background:#0b2043;
  font-size:13px;
  padding:4px 10px;
}
.header-inner{
  max-width:1180px;
  margin:0 auto;
  padding:18px 10px;
}
.site-title{
  font-size:32px;
  font-weight:bold;
}
.site-subtitle{
  font-size:14px;
  margin-top:4px;
}

/* NAV */
nav{
  background:#1b4a8f;
}
nav .nav-inner{
  max-width:1180px;
  margin:0 auto;
  padding:8px 10px;
}
nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:14px;
}
nav li a{
  color:#fff;
  text-decoration:none;
  font-weight:bold;
}
nav li a:hover{
  text-decoration:underline;
}

/* BANNER */
.banner{
  background:url('https://images.pexels.com/photos/208512/pexels-photo-208512.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover no-repeat;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
}
.banner h1{
  font-size:40px;
}

/* MAIN GRID */
main{
  max-width:1180px;
  margin:25px auto 40px;
  padding:0 10px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;
}
.card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:4px;
  overflow:hidden;
  font-size:13px;
}
.card-thumb{
  position:relative;
  background:#000;
}
.card-thumb img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}
.card-date{
  position:absolute;
  left:6px;
  top:6px;
  background:#163b73;
  color:#fff;
  padding:2px 6px;
  font-size:11px;
}
.card-body{
  padding:8px 10px 12px;
}
.card-title{
  font-weight:bold;
  margin-bottom:4px;
}
.card-excerpt{
  color:#555;
  font-size:12px;
}

/* PAGINATION */
.pagination{
  margin:18px 0;
  text-align:center;
}
.pagination a,
.pagination span{
  display:inline-block;
  margin:0 3px;
  padding:3px 8px;
  border:1px solid #ccc;
  font-size:12px;
}
.pagination .current{
  background:#163b73;
  color:#fff;
  border-color:#163b73;
}

/* FOOTER */
footer{
  background:#f1f1f1;
  border-top:1px solid #ddd;
  font-size:11px;
  color:#555;
  padding:15px 10px 20px;
}
footer .footer-inner{
  max-width:1180px;
  margin:0 auto;
}
footer .footer-links{
  margin:8px 0 10px;
}
footer .footer-links a{
  color:#163b73;
  text-decoration:none;
  margin-right:8px;
}
footer .footer-links a:hover{
  text-decoration:underline;
}

@media(max-width:600px){
  .banner h1{font-size:26px;text-align:center;padding:0 10px;}
  nav ul{gap:10px;font-size:12px;}
}