:root{
  --card-radius: 12px;
  --card-shadow: 0 6px 18px rgba(20,20,40,0.06);
  --accent: #2b6cb0;
}

body{
  background:#fff;
  color:#111;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.site-header{
  border-bottom:1px solid #eef2f7;
  background:#fff;
}

.sitename{
  font-weight:700;
  color:var(--accent);
  margin:0;
}

.page-title{
  padding:2.2rem 0;
  border-bottom:1px solid #f1f5f9;
}

.page-title h1{
  font-size:1.5rem;
  margin:0;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:1rem;
}

@media(min-width:700px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(min-width:1100px){
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

.article-card{
  background:#fff;
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .18s ease, box-shadow .18s ease;
}

.article-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(20,20,40,0.08);
  transform: scale(1.02);
}

.article-thumb{
  height:170px;
  background-size:cover;
  background-position:center;
  transition: transform .35s ease;
}

.article-card:hover .article-thumb{
  transform: scale(1.05);
}

.article-body{
  padding:1rem 1rem 1.15rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.article-title{
  font-size:1rem;
  font-weight:600;
  margin:0;
  color:#071129;
}

.article-excerpt{
  font-size:.92rem;
  color:#475569;
  line-height:1.35;
  margin:0;
}

.meta-row{
  display:flex;
  gap:.8rem;
  align-items:center;
  font-size:.84rem;
  color:#6b7280;
}

.meta-row .dot{
  width:6px;
  height:6px;
  background:#c7d2fe;
  border-radius:50%;
  display:inline-block;
}

.card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.8rem 1rem;
  border-top:1px solid #f1f5f9;
}

.btn-plain{
  background:transparent;
  border:0;
  color:var(--accent);
  font-weight:600;
  padding:0.2rem .5rem;
}

.modal-hero{
  height:220px;
  background-size:cover;
  background-position:center;
  border-radius:8px;
}

.article-full{
  max-width:900px;
  margin:0 auto;
  padding:2rem;
  background:#fff;
}

footer.footer{
  padding:2rem 0;
  margin-top:3rem;
  border-top:1px solid #f1f5f9;
  text-align:center;
  color:#6b7280;
}

.toc-wrap{position:fixed;right:2rem;top:120px;width:260px;max-height:70vh;overflow:auto}
@media(max-width:991px){.toc-wrap{position:static;width:100%;max-height:none;margin-bottom:1rem}}
.toc-card{background:#fff;border-radius:10px;box-shadow:0 8px 22px rgba(10,10,30,0.06);padding:.9rem}
.toc-card h6{font-size:.92rem;margin:0 0 .5rem 0}
.toc-card a{display:block;color:#475569;padding:.18rem 0;text-decoration:none}
.toc-card a.active{color:var(--accent);font-weight:600}
.article-content h2{scroll-margin-top:110px}