/* ---------- 主题变量 ---------- */
:root{
    --radius: 16px;
    --shadow: 0 8px 22px rgba(15,23,42,.06);
    --border: 1px solid rgba(15,23,42,.08);

    --c-bg: #ffffff;
    --c-text: #0f172a;
    --c-muted: #475569;
    --c-subtle: #94a3b8;

    --btn-bg: #111827;
    --btn-fg: #ffffff;

    --grad-a: #6366f1;
    --grad-b: #22d3ee;
    --grad-c: #f472b6;
}

/* ---------- 布局通用 ---------- */
.wrap{ max-width: 1060px; margin: 0 auto; padding: 0 1rem; }
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.grid.two{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 860px){
    .grid, .grid.two{ grid-template-columns: 1fr; }
}

/* ---------- 卡片/阴影 ---------- */
.card{
    background: var(--c-bg);
    border: var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
}
.card.flat{ box-shadow: none; }

/* ---------- 文字 ---------- */
h1,h2,h3{ color: var(--c-text); }
.sub{ color: var(--c-muted); }
.meta-muted{ color: var(--c-subtle); font-size: .9rem; }

/* ---------- 按钮 ---------- */
.btn{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1rem;
    border-radius: calc(var(--radius) - 4px);
    border: var(--border);
    text-decoration:none; color: var(--c-text);
    transition: transform .08s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.btn.primary{ background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn.ghost{ background: #fff; color:#111827; }

/* ---------- 小组件 ---------- */
.chip{
    display:inline-block; padding:.3rem .6rem; border-radius:999px;
    background: rgba(15,23,42,.06); backdrop-filter: blur(6px);
    font-size:.85rem;
}

/* 渐变标题高亮（首页/关于用到的 span） */
.gx{
    background: linear-gradient(120deg,var(--grad-a),var(--grad-b),var(--grad-c));
    -webkit-background-clip:text; background-clip:text; color: transparent;
}

/* ---------- Hero 背景（无需图片） ---------- */
.hero { position: relative; overflow: clip; padding: 5rem 0 4rem; }
.hero-bg{
    position:absolute; inset:0;
    background:
            radial-gradient(900px 400px at 10% 0%, rgba(99,102,241,.18), transparent 55%),
            radial-gradient(600px 300px at 90% 10%, rgba(236,72,153,.18), transparent 60%),
            radial-gradient(700px 280px at 50% -10%, rgba(56,189,248,.14), transparent 60%);
    filter: blur(10px);
    pointer-events:none;
}

/* ---------- 列表卡片（最近文章） ---------- */
.posts{ list-style:none; padding:0; margin:1rem 0 0;
    display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.post-card{
    display:grid; grid-template-rows:180px 1fr;
    border: var(--border);
    border-radius: var(--radius);
    overflow:hidden; background:#fff; text-decoration:none; color:inherit;
}
.post-card img, .post-card .ph{ width:100%; height:100%; object-fit:cover;
    background:linear-gradient(135deg,#dbeafe,#fee2e2); }
.post-meta{ padding:.9rem 1rem 1rem; }
@media (max-width: 860px){ .posts{ grid-template-columns:1fr; } .post-card{ grid-template-rows:200px 1fr; } }