:root{
  --bg:#000;
  --fg:#fff;
  --muted: #bdbdbd;
  --accent: #b89cff;
  --max-width:1200px;
  --gap:24px;
  --radius:12px;
  --mono: "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  margin:0;
  padding:32px;
  display:flex;
  justify-content:center;
}
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
}
.header{
  text-align:center;
  margin-bottom:32px;
}
.header h1{
  font-size:48px;
  margin:0 0 8px 0;
  letter-spacing:1px;
  text-transform:lowercase;
}
.header p{margin:0;color:var(--muted);}

/* nav */
.nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:20px 0}
.nav a{color:var(--fg);text-decoration:none;padding:8px 12px;border:1px solid rgba(255,255,255,0.06);border-radius:8px;font-size:15px}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);align-items:start}

/* cards */
.card{background:rgba(255,255,255,0.02);padding:18px;border-radius:12px;min-height:120px}
.card h3{margin:0 0 8px 0}
.card p{margin:0;color:var(--muted)}

/* player small */
.player{
  display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,0.02)
}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:8px 12px;border-radius:8px;color:var(--fg);cursor:pointer}

/* blog */
.post-meta{color:var(--muted);font-size:13px;margin-bottom:12px}

/* archive timeline */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:12px 0;border-bottom:1px dashed rgba(255,255,255,0.03)}

/* small responsive */
@media (max-width:600px){
  .header h1{font-size:36px}
  body{padding:16px}
}