:root{
  --bg:#0b0f14; --bg2:#111722;
  --fg:#ffffff; --muted:rgba(255,255,255,.72);
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.18);
  --accent:#7c5cff; --accent-2:#2de2e6;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial;background:linear-gradient(180deg,var(--bg),var(--bg2) 60%,var(--bg));color:var(--fg)}

.bk-hero{
  padding: clamp(2rem, 6vw, 4rem) 1.25rem 1rem;
  position: relative;
}
.bk-hero .wrap{width:min(1000px, 92vw); margin:0 auto; display:grid; grid-template-columns: 120px 1fr; gap:1.5rem; align-items:center}
.bk-hero .brand img{width:100%; height:auto; display:block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));}
@media (max-width:720px){ .bk-hero .wrap{ grid-template-columns: 1fr; text-align:center } .bk-hero .brand{justify-self:center; width:96px} }
.bk-hero .intro h1{margin:.2rem 0 .3rem; font-size: clamp(2rem, 3vw, 2.8rem)}
.bk-hero .intro p{margin:0; color:var(--muted)}
.filters{display:flex; gap:.5rem; flex-wrap:wrap; margin-top: .9rem}
.chip{padding:.5rem .8rem; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid var(--stroke); color:var(--fg); cursor:pointer}
.chip.is-active{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#0b0f14; border:0}

.bk-container{width:min(1100px, 92vw); margin: 0 auto 3rem}
.bk-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; margin-top:1rem}
@media (max-width:980px){ .bk-grid{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width:640px){ .bk-grid{grid-template-columns: 1fr;} }

.bk-card{
  display:grid; grid-template-rows: auto 1fr; gap: .75rem;
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.bk-card:hover{ transform: translateY(-4px); background: rgba(255,255,255,.10); box-shadow: 0 18px 40px rgba(0,0,0,.40) }
.cover{aspect-ratio: 3/4; background: #0f151f}
.cover img{width:100%; height:100%; object-fit: cover; display:block}
.content{padding:1rem}
.content h3{margin:.2rem 0; font-size: clamp(1.05rem, 1.2vw, 1.25rem)}
.content .sub{margin:0; color:var(--muted); font-size:.95rem}
.blurb{margin:.5rem 0 .8rem; color:var(--muted)}
.meta{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem}
.tag{font-size:.78rem; padding:.28rem .5rem; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.08)}

.actions{display:flex; gap:.5rem}
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:12px;
  background: rgba(255,255,255,.10); border:1px solid var(--stroke);
  color:var(--fg); text-decoration:none; font-weight:600;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.16) }
.btn.primary{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); border:0; color:#0b0f14 }

.bk-cta{display:flex; gap:.6rem; justify-content:center; margin-top:1.5rem}
.bk-footer{ text-align:center; color:var(--muted); padding:1.5rem 0; border-top:1px solid rgba(255,255,255,.1) }