:root{--nav:#0b2b4a;--accent:#d9202c;--muted:#6b7280;--bg:#f4f6f8;--card:#fff;--maxw:1100px}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter','Noto Sans Devanagari',system-ui,Arial;background:var(--bg);color:#0b1220;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:10px 14px}

/* Header layout: brand | search | icons */
header.site{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  padding:10px;
  background:var(--nav);
  color:#fff;
  border-radius:8px;
  position:sticky;
  top:10px;            /* sticky with small offset */
  z-index:40;
  box-shadow:0 6px 18px rgba(11,17,34,0.06);
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.logo{width:46px;height:46px;border-radius:8px;background:linear-gradient(135deg,#ff6b6b,#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:800}
.site-title{line-height:1}
.site-title h1{margin:0;font-size:18px}
.site-title p{margin:0;font-size:12px;opacity:.9}

/* Search center area: allow it to grow but not overflow */
.search-wrap{
  flex:1 1 420px;
  display:flex;
  justify-content:center;
  padding:0 8px;
}
.search-form{
  width:100%;
  max-width:760px;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.08);
  border-radius:10px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,0.06);
}
.search-form input{
  border:0;background:transparent;color:#fff;padding:8px 10px;font-size:14px;width:100%;outline:none;
}
.search-form button{
  border:0;background:rgba(255,255,255,0.12);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600;
}

/* Right icons group */
.icons{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.icon{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}

/* small screens: allow wrapping and smaller search */
@media (max-width:640px){
  header.site{flex-wrap:wrap;align-items:center}
  .search-wrap{flex-basis:100%;order:3;padding:8px 0}
  .brand{order:1}
  .icons{order:2}
  .search-form{padding:6px}
  .search-form input{font-size:13px;padding:7px}
  .search-form button{padding:7px 9px}
}

/* breaking */
.breaking{margin-top:10px;background:var(--accent);color:#fff;padding:8px;border-radius:8px;overflow:hidden}
.marquee{display:inline-block;white-space:nowrap;animation:scroll 20s linear infinite}
.marquee span{display:inline-block;padding:0 22px;font-weight:700}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* featured hero */
.hero{margin-top:14px;border-radius:12px;overflow:hidden;box-shadow:0 12px 40px rgba(11,17,34,0.06);background:var(--card)}
.hero img{width:100%;height:320px;object-fit:cover;display:block}
.hero-body{padding:14px}
.hero h2{margin:0;font-size:22px}
.hero .meta{color:var(--muted);font-size:13px;margin-top:8px}

/* posts as full-image cards (no excerpt) */
.posts{margin-top:16px;display:grid;grid-template-columns:1fr;gap:18px}
.post-card{background:var(--card);border-radius:10px;overflow:hidden;box-shadow:0 8px 30px rgba(11,17,34,0.04);transition:transform .12s}
.post-card:hover{transform:translateY(-6px)}
.post-card img{width:100%;height:220px;object-fit:cover;display:block}
.post-card .inner{padding:12px}
.post-title{font-size:18px;font-weight:700;margin:0 0 8px;line-height:1.2}
.post-meta{font-size:13px;color:var(--muted)}

@media(min-width:900px){
  .posts{grid-template-columns:repeat(2,1fr)}
  .hero img{height:420px}
  .post-card img{height:260px}
}
@media(max-width:480px){
  .search-form input{font-size:14px}
  .hero img{height:200px}
  .post-card img{height:180px}
  .post-title{font-size:16px}
}

/* footer */
footer.site{margin-top:18px;padding:14px;border-radius:8px;background:#071228;color:#cfe1ef;text-align:center}

/* small niceties */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:#fff;padding:6px;border-radius:4px;color:#000}