:root{
  --bg:#0e0f12; --text:#e8e8ea; --muted:#a4a7ae;
  --accent:#ff3b3b; --card:#151821; --border:#242937;
}

*{box-sizing:border-box}

.wrap{max-width:1200px; margin:0 auto; padding:24px}


.brand{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:18px 24px 12px;
}
.brand h1{margin:0; font-size:22px; letter-spacing:.3px}
.nav a{color:var(--muted); text-decoration:none; margin-left:14px}
.search{padding:0 24px 18px}
.search input{
  width:100%; max-width:460px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:#0f121a; color:var(--text);
  outline:none;
}

/* ---- GRID: 1 on mobile, 2 on tablets, 3 on desktop ---- */
.grid{
  display:grid; gap:40px; padding-top:24px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}

.card{
  background: #121212; border:4px solid #b8b8b8;
  /*! border-radius:16px; */ overflow:hidden; display:flex; flex-direction:column;
  /* ✨ Small shadow under each card */
  box-shadow:0 4px 8px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 18px rgba(0,0,0,.35);
  border-color: white;
}

.thumb{position:relative; aspect-ratio:16/9; background:#0b0d12}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.content{padding:16px; display:flex; gap:10px; flex-direction:column; flex:1}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  font-size:11px; color: black;
  background:white; border:1px solid #ffffff;
  padding:2px 2px;
}
.content h3{margin:0; font-size:1.7rem; line-height:1.35}
.content p{margin:0; color:var(--muted)}
.readmore{margin-top:auto}
.readmore a{
  display:inline-block; margin-top:8px; text-decoration:none; color:#fff;
  background: #9e082f; padding:10px 12px; border-radius:10px; font-weight:600;
}
.readmore a:hover{filter:brightness(1.1)}
.meta{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 16px 16px; color:var(--muted); font-size:12px;
}
footer{
  text-align:center; color:var(--muted); border-top:1px solid var(--border);
  padding:24px; margin-top:28px;
}

/* Light mode (optional) */
@media (prefers-color-scheme: light){
  :root{ --bg:#fbfbfd; --text:#111316; --muted:#5a616b; --card:#ffffff; --border:#e8eaf0; --accent:#e63946;}
  .thumb{background:#f2f4f8}
}
.meta{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 16px 16px; color:var(--muted); font-size:12px;
}

.author {
  display:flex; align-items:center; gap:8px;
}

.author img {
  width:28px;
  height:28px;
  border-radius:50%; /* makes it round */
  object-fit:cover;
  border:1px solid var(--border);
}