:root {
    --bg-color: #FAFAFA; /* 极浅暖灰，降低对比度带来的刺眼感 */
    --text-color: #333333; /* 深灰而非纯黑 */
    --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 优雅的非衬线体 */
    --gap-size: 80px; /* 大量留白，赋予呼吸感 */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* 让字体在 macOS/iOS 上更平滑 */
}

/* --- 导航栏 --- */
.site-header {
    padding: 60px 20px;
    text-align: center;
}

.site-header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 50px;
}

.site-header a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.4; /* 默认低调 */
    transition: opacity 0.4s ease;
}

.site-header a:hover, .site-header a.active {
    opacity: 1;
}

/* --- 画廊网格 (纯 CSS 瀑布流) --- */
.gallery-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px 120px;
    columns: 2; /* 双列排版 */
    column-gap: var(--gap-size);
}

@media (max-width: 768px) {
    .gallery-container { 
        columns: 1; /* 移动端回退到单列 */
        padding: 0 20px 80px; 
    }
}

.gallery-item {
    break-inside: avoid; /* 防止图片被截断到下一列 */
    margin: 0 0 var(--gap-size) 0;
    opacity: 0;
    transform: translateY(30px); /* 初始略微靠下 */
    /* 极致缓慢的贝塞尔曲线动画，营造平静感 */
    transition: opacity 1.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}

.gallery-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.6s ease;
}

/* 极其克制的 Hover 动效，仅略微降低透明度 */
.gallery-item:hover img {
    opacity: 0.85; 
}

/* --- 全屏 Lightbox --- */
.lightbox {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color); /* 使用同样的背景色，保持整体感 */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-img {
    max-width: 85vw;
    max-height: 80vh;
    object-fit: contain;
    /* 去除边框，仅保留极其微弱的阴影托起图片 */
    box-shadow: 0 20px 60px rgba(0,0,0,0.03); 
}

.lightbox-close {
    position: absolute;
    top: 40px;
    right: 50px;
    font-size: 2.5rem;
    font-weight: 200;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.3;
    transition: opacity 0.4s;
    line-height: 1;
}

.lightbox-close:hover {
    opacity: 1;
}

.lightbox-caption {
    margin-top: 30px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    opacity: 0.6;
    text-align: center;
}