:root{
  --bg:#0b0d10;
  --card:#12151a;
  --ink:#e8eef6;
  --ink-dim:#a7b1bf;
  --acc:#8ac4ff;
  --line:#1b2028;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}

.shell{max-width:1100px;margin:0 auto;padding:24px}
.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,13,16,.7);backdrop-filter:blur(8px);z-index:10}
.identity{display:flex;gap:20px;align-items:center}
.avatar{width:108px;height:108px;border-radius:22%;object-fit:cover;border:2px solid var(--line);box-shadow:var(--shadow)}
.who h1{margin:0 0 6px 0;font-weight:800;letter-spacing:.2px}
.tagline{margin:0 0 8px 0;color:var(--ink-dim)}
.links a{color:var(--acc);text-decoration:none}
.links a:hover{text-decoration:underline}

@media (min-width:960px){
  .grid{
    grid-template-columns:2fr 1fr;
  }
  #publications{
    grid-column:1 / span 2; /* 占满两列，可选 */
  }
}

.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.0));border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h2{margin-top:0;font-weight:800}

.markdown p{margin:.4rem 0 .9rem}
.markdown a{color:var(--acc);text-decoration:none}
.markdown a:hover{text-decoration:underline}
.markdown ul{margin:.4rem 0 .9rem 1.2rem}
.markdown strong{font-weight:600}

.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:6px}
.filters input[type="search"]{width:240px;max-width:100%;padding:.55rem .8rem;border-radius:12px;border:1px solid var(--line);background:#0e1116;color:var(--ink);outline:none}
.filters input[type="search"]::placeholder{color:#6f7a89}

.pubs{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.pub{padding:16px;border:1px solid var(--line);border-radius:14px;background:#0e1116}
.pub-title{font-weight:600;margin:0 0 4px 0}
.pub-meta{color:var(--ink-dim);font-size:.95rem;margin:0 0 8px 0}
.pub-actions a{display:inline-block;margin-right:10px;color:var(--acc);text-decoration:none}
.pub-actions a:hover{text-decoration:underline}

.muted{color:var(--ink-dim)}
.site-footer{border-top:1px solid var(--line);margin-top:10px}
.site-footer p{color:var(--ink-dim);margin:0}

/* 标题样式 */
.pub-title{
  font-weight:600;
  margin:0 0 4px 0;
}

/* 胶囊标签（颜色由 JS 动态注入，通过 --venue-h 控制色相） */
.venue-pill{
  --venue-h:210; /* fallback */
  display:inline-block;
  padding:.2rem .6rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;
  white-space:nowrap;
  border:1px solid hsl(var(--venue-h) 60% 40% / .35);
  background:linear-gradient(
    180deg,
    hsl(var(--venue-h) 80% 55% / .18),
    hsl(var(--venue-h) 80% 45% / .18)
  );
  color:hsl(var(--venue-h) 90% 78%);
  box-shadow:inset 0 1px 0 hsl(var(--venue-h) 90% 90% / .25);
}

/* Tags胶囊样式 */
.pub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.tag-pill {
  --venue-h: 200; /* fallback */
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid hsl(var(--venue-h) 50% 45% / 0.3);
  background: linear-gradient(
    135deg,
    hsl(var(--venue-h) 70% 50% / 0.15),
    hsl(var(--venue-h) 70% 40% / 0.15)
  );
  color: hsl(var(--venue-h) 85% 75%);
  box-shadow: 
    inset 0 1px 0 hsl(var(--venue-h) 80% 80% / 0.2),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.tag-pill:hover {
  background: linear-gradient(
    135deg,
    hsl(var(--venue-h) 70% 55% / 0.25),
    hsl(var(--venue-h) 70% 45% / 0.25)
  );
  border-color: hsl(var(--venue-h) 60% 50% / 0.4);
  transform: translateY(-1px);
}

/* 整体两栏布局 */
.layout {
  display: flex;
  min-height: 100vh;
}

/* 左侧侧边栏 */
.site-sidebar {
  width: 260px;
  background: #12151a;
  border-right: 1px solid var(--line);
  padding: 24px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;          /* 全高 */
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 头像和简介 */
.identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
}
.who h1 {
  margin: 0;
  font-weight: 800;
}
.tagline {
  color: var(--ink-dim);
  margin: 0 0 12px 0;
  font-size: .9rem;
  line-height: 1.4;
}
.links a {
  color: var(--acc);
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
}
.links a:hover {
  text-decoration: underline;
}

/* 社交图标样式 */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  color: var(--ink-dim);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 18px;
}

.social-icons a:hover {
  background: linear-gradient(145deg, rgba(138,196,255,.15), rgba(138,196,255,.05));
  border-color: var(--acc);
  color: var(--acc);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(138,196,255,.2);
}

.layout {
  display: flex;
  min-height: 100vh;
  max-width: 1400px;   /* 页面最大宽度 */
  margin: 0 auto;      /* 水平居中 */
  padding: 0 40px;     /* 左右留白（可根据需要调整） */
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 左侧 40% */
.site-sidebar {
  flex: 4;              /* 比例 */
  max-width: 25%;       /* 最大宽度限制 */
  background: #12151a;
  border-right: 1px solid var(--line);
  padding: 32px;
  position: sticky;
  top: 0;
  height: 100vh;        /* 高度全屏 */
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 右侧 60% */
.site-main {
  flex: 6;
  max-width: 75%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 卡片保持一致 */
.card {
  background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

@media (max-width: 768px) {
  .layout {
    padding: 0 16px;
  }
}