/* 全局重置 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif; /* 正文用无衬线体 */
    color: #333;
    line-height: 1.8;
    background-color: #fff;
}

/* 链接样式 */
a { color: #000; text-decoration: none; transition: 0.3s; }
a:hover { color: #666; }

/* 容器：控制页面宽度 */
.wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 顶部导航栏 --- */
.site-header {
    padding: 40px 0;
    margin-bottom: 60px;
    border-bottom: 1px solid #eee; /* 一条淡淡的分界线 */
    text-align: center; /* 居中风格 */
}

.site-title {
    display: block;
    font-family: 'Playfair Display', serif; /* 标题用衬线体 */
    font-size: 24px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.site-nav a {
    margin: 0 15px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.site-nav a:hover { color: #000; text-decoration: underline; }

/* --- 页面内容 --- */
h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: normal;
    color: #111;
    margin-top: 40px;
}

h1 { font-size: 36px; text-align: center; margin-bottom: 40px; }
h2 { font-size: 24px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
h3 { font-size: 18px; font-weight: bold; margin-bottom: 5px; }

p { margin-bottom: 20px; font-size: 16px; font-weight: 300; }

/* 列表和表格 */
ul { padding-left: 20px; }
li { margin-bottom: 10px; }

/* 页脚 */
.site-footer {
    margin-top: 80px;
    padding: 40px 0;
    border-top: 1px solid #eee;
    text-align: center;
    font-size: 12px;
    color: #999;
}
.site-footer .social-links a { margin: 0 10px; color: #555; }


/* --- Portfolio Project Cards --- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自动响应式排版 */
    gap: 30px;
    margin-top: 40px;
}

.project-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px; /* 圆角 */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 鼠标悬停时的帅气效果 */
.project-card:hover {
    transform: translateY(-5px); /* 微微上浮 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 增加阴影 */
    border-color: #ddd;
}

.project-image img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* 保证图片填满且不变形 */
    border-bottom: 1px solid #f5f5f5;
}

.project-content {
    padding: 25px;
}

.project-tags {
    margin-top: 15px;
}

.tech-tag {
    display: inline-block;
    background: #f4f4f4;
    color: #555;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: bold;
}