/* ===== Base / Theme ===== */
:root{
  --bg:#0d0d0d;
  --bg2:#1b1b1b;
  --ink:#e0e0e0;
  --muted:#bdbdbd;
  --line:#333;
  --accent:#39ff14;
  --accent-2:#e600ff;
  --shadow:0 0 16px rgba(0,0,0,0.5);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Fira Code', monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height:1.6;
}

/* ===== Header / Nav ===== */
.site-header{
  text-align:center;
  padding:2rem 1rem 1.25rem;
  border-bottom:2px solid var(--accent);
}
.site-header h1{
  margin:0;
  font-size:2rem;
  color:var(--accent);
}
.site-header .tag{
  margin:.35rem 0 1rem;
  color:var(--muted);
  font-size:0.95rem;
}
.top-nav{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}
.top-nav a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px dotted transparent;
}
.top-nav a:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* ===== Home / Intro ===== */
.home{
  max-width:1100px;
  margin:0 auto;
  padding:1rem;
}
.intro{
  margin:1rem auto 1.5rem;
  max-width:840px;
  color:var(--muted);
}

/* ===== Post List / Cards ===== */
.post-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1rem;
}
.post-card{
  display:flex;
  gap:1rem;
  padding:0.75rem;
  border:1px solid var(--accent);
  border-radius:12px;
  background:var(--bg2);
  box-shadow:var(--shadow);
}
.post-card .thumb{
  flex:0 0 120px;
  display:block;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
}
.post-card .thumb img{
  display:block;
  width:120px;
  height:100%;
  object-fit:cover;
}
.post-card .card-body{
  flex:1;
  min-width:0;
}
.post-card-title{
  margin:.1rem 0 .2rem;
  font-size:1.05rem;
}
.post-card-title a{
  color:var(--ink);
  text-decoration:none;
}
.post-card-title a:hover{
  color:var(--accent);
}
.post-card-meta{
  margin:0 0 .4rem;
  color:var(--muted);
  font-size:.85rem;
}
.post-card-excerpt{
  margin:.2rem 0 .6rem;
  color:var(--ink);
  opacity:.95;
}
.post-card-link{
  color:var(--accent-2);
  text-decoration:none;
}
.post-card-link:hover{
  text-decoration:underline;
}

/* ===== Single Post ===== */
.site-header .breadcrumb{
  font-size:.9rem;
  margin-bottom:.5rem;
  opacity:.85;
}
.breadcrumb a{
  color:var(--accent);
  text-decoration:none;
}
.breadcrumb a:hover{ text-decoration:underline; }

.post-title{ margin:.25rem 0 .25rem; }
.post-meta{ color:#aaa; font-size:.9rem; }

.post-content{
  max-width:840px;
  margin:1rem auto;
  padding:1rem;
  background:var(--bg2);
  border-radius:10px;
  box-shadow:var(--shadow);
}
.post-header-img{
  width:100%;
  height:auto;
  border-radius:8px;
  display:block;
}
.hero{ margin:0 0 .75rem; }
.hero figcaption{
  text-align:center;
  font-size:.85rem;
  color:var(--muted);
  margin-top:.4rem;
}

/* Headings in post body */
.post-content h2{
  border-left:3px solid var(--accent);
  padding-left:.6rem;
  margin-top:1.6rem;
}

/* Callouts */
.callout{
  padding:.9rem 1rem;
  border-radius:8px;
  margin:1rem 0;
  border:1px solid var(--line);
}
.callout.success{ background:#112111; border-color:#1f4d1f; }
.callout.warn{ background:#2a1a10; border-color:#6a3b1e; }

/* Checklist */
.checklist{ list-style:none; padding-left:0; }
.checklist li{
  position:relative;
  padding-left:1.4rem;
  margin:.35rem 0;
}
.checklist li::before{
  content:"▢";
  position:absolute;
  left:0;
  color:var(--accent);
}

/* ===== Footer ===== */
.site-footer{
  text-align:center;
  padding:2rem 1rem;
  border-top:2px solid var(--accent);
  margin-top:2rem;
  font-size:.95rem;
  color:#999;
}
.site-footer a{
  color:var(--accent);
  text-decoration:none;
}
.site-footer a:hover{ text-decoration:underline; }

/* ===== Utilities / Responsive ===== */
hr{ border:0; border-top:1px solid var(--line); margin:1.25rem 0; }
a{ color:var(--accent-2); }
a:hover{ text-decoration:underline; }

@media (max-width:640px){
  .post-card{
    flex-direction:column;
  }
  .post-card .thumb{
    width:100%;
    flex:0 0 auto;
  }
  .post-card .thumb img{
    width:100%;
    height:160px;
    object-fit:cover;
  }
}