/* 修改后的 style.css */
:root { 
    --ink: #3E2723; /* 深咖啡色，比纯蓝更有档案感 */
    /* 核心调色盘：参考图片中的深褐色与米黄色 */
    --paper-center: #F4E4BC;  
    --paper-mid: #D4B483;
    --paper-edge: #8C6239;    
    --red: #8B2635; 
}

body { 
    margin: 0;
    min-height: 100vh;
    color: var(--ink); 
    font-family: 'Inter', system-ui, -apple-system, sans-serif;

    /* 多层背景方案 */
    background-color: var(--paper-center);
    background-image: 
        /* 第一层：模拟纸张纤维和陈旧污渍的颗粒感 */
        url("https://www.transparenttextures.com/patterns/p6-mini.png"),
        /* 第二层：复杂的径向渐变，模拟中心向边缘的氧化过程 */
        radial-gradient(
            circle at center, 
            var(--paper-center) 0%, 
            var(--paper-mid) 60%, 
            var(--paper-edge) 100%
        );
    
    background-attachment: fixed;

    /* 关键：增加一个巨大的内阴影，模拟图片四周焦黑的质感 */
    box-shadow: inset 0 0 150px 50px rgba(62, 39, 35, 0.4);
}

/* 档案馆卡片优化 */
.mil-card { 
    background: rgba(252, 249, 242, 0.85); /* 半透明米白，透出底部的纸张纹理 */
    border: 2px solid var(--ink); 
    box-shadow: 4px 4px 0px var(--ink);
    backdrop-filter: blur(2px); /* 稍微模糊，增加厚重感 */
}

/* 输入框与按钮配合环境色 */
.mil-input {
    background: rgba(255, 255, 255, 0.3);
    border-color: var(--ink);
}

.mil-btn {
    border-color: var(--ink);
    color: var(--ink);
}

nav {
    background: transparent !important;
    /* 确保这里没有 border-bottom */
    border-bottom: none !important; 
    /* 适当增加底部内边距，利用留白（Whitespace）自然区分标题和内容 */
}

/* 添加到 style.css */
.logo-trigger {
    display: flex;
    align-items: center;
    overflow: visible; /* 确保图片能向右伸展 */
}

/* 展开容器的初始状态 */
.expanded-photo-container {
    white-space: nowrap; /* 防止图片在展开过程中换行 */
}

/* 当鼠标移入时，文字和红色方块的微小反馈 */
.logo-trigger:hover h1 {
    letter-spacing: 0.1em; /* 文字稍微拉宽，模拟档案被打开的呼吸感 */
    transition: all 0.4s ease;
}

.logo-trigger:hover .w-6.h-6 {
    transform: rotate(90deg); /* 红色方块旋转，像锁扣被打开 */
    transition: all 0.4s ease;
}