/* ================================================================
   岁月长河 · 时间轴
   墨底 + 内敛朱砂色块 + 云纹视差
   ================================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:"Noto Serif SC","宋体","华文楷体",serif;
    background:#2C221A;
    color:rgba(232,220,199,0.95);
    line-height:1.7;
    letter-spacing:0.03em;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow-x:hidden;
}

/* ===== 噪点 ===== */
body::before {
    content:'';
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity:0.025;
}

/* ===== 纸张纤维纹理 ===== */
body::after {
    content:'';
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(160,140,120,0.015) 3px, rgba(160,140,120,0.015) 4px);
    opacity:0.5;
}

/* ===== 视差云纹层 ===== */
.parallax-layer {
    position:fixed; inset:0; pointer-events:none; z-index:0;
    will-change:transform;
}

/* 远山 — 朱砂色 */
.parallax-deep {
    opacity:1;
}
.parallax-deep svg { width:100%; height:100%; }
.parallax-deep path {
    stroke:rgba(156,42,42,0.28);
    stroke-width:0.7;
    fill:none;
}

/* 云涡 — 白色 */
.parallax-mid {
    opacity:1;
}
.parallax-mid svg { width:100%; height:100%; }
.parallax-mid path {
    stroke:rgba(255,255,255,0.10);
    stroke-width:0.6;
    fill:none;
}

/* 气纹 — 混合 */
.parallax-fast {
    opacity:1;
}
.parallax-fast svg { width:100%; height:100%; }
.parallax-fast path {
    stroke:rgba(156,42,42,0.20);
    stroke-width:0.5;
    fill:none;
}
.parallax-fast circle {
    fill:rgba(255,255,255,0.12);
}

.header, .main-container, .footer { position:relative; z-index:1; }

/* ===== 顶部 ===== */
.header {
    background:#2C221A;
    padding:100px 60px 80px;
    max-width:1100px;
    margin:0 auto;
    width:100%;
    text-align:left;
    position:relative;
}

/* 标题背后的钢笔画 — 大面积低透明 */
.header::before {
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%;
    height:100%;
    background:
        url('images/pen-drawing.png') center/cover no-repeat;
    z-index:0;
    pointer-events:none;
    opacity:0.12;
}

.header-label {
    font-family:"Georgia","Times New Roman",serif;
    font-size:11px;
    letter-spacing:0.4em;
    color:rgba(232,220,199,0.55);
    text-transform:uppercase;
    margin-bottom:20px;
    font-style:italic;
    position:relative;
    z-index:1;
}

.hero-title-row {
    display:flex;
    align-items:baseline;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:8px;
    position:relative;
    z-index:1;
}

.site-title {
    font-size:clamp(42px, 7vw, 72px);
    font-weight:900;
    letter-spacing:0.12em;
    color:#E8DCC7;
    line-height:1.1;
}

.site-title-en {
    font-family:"Georgia","Times New Roman",serif;
    font-size:clamp(13px, 2vw, 16px);
    color:rgba(232,220,199,0.5);
    font-style:italic;
    letter-spacing:0.2em;
    white-space:nowrap;
}

.hero-sub-row {
    display:flex;
    align-items:baseline;
    gap:20px;
    margin-bottom:32px;
    position:relative;
    z-index:1;
}

.site-subtitle {
    font-size:15px;
    color:rgba(232,220,199,0.65);
    letter-spacing:0.25em;
    font-weight:400;
}

.site-subtitle-en {
    font-family:"Georgia","Times New Roman",serif;
    font-size:11px;
    color:rgba(232,220,199,0.45);
    font-style:italic;
    letter-spacing:0.2em;
}

/* 导航 */
.site-nav {
    display:flex;
    gap:32px;
    margin-top:48px;
    padding-top:24px;
    border-top:1px solid rgba(232,220,199,0.15);
    position:relative;
    z-index:1;
}

.site-nav a {
    color:rgba(232,220,199,0.55);
    text-decoration:none;
    font-size:13px;
    letter-spacing:0.15em;
    transition:all 0.45s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    padding-bottom:4px;
}

.site-nav a::after {
    content:'';
    position:absolute;
    bottom:0; left:0;
    width:0; height:1px;
    background:rgba(156,42,42,0.6);
    transition:width 0.45s cubic-bezier(0.4,0,0.2,1);
}

.site-nav a:hover,
.site-nav a.active { color:#E8DCC7; }

.site-nav a:hover::after,
.site-nav a.active::after { width:100%; }

.nav-en {
    font-family:"Georgia","Times New Roman",serif;
    font-size:10px;
    color:rgba(232,220,199,0.55)
    font-style:italic;
    letter-spacing:0.15em;
    display:block;
    margin-top:2px;
}

/* ===== 主容器 ===== */
.main-container {
    flex:1;
    padding:0 60px 100px;
    max-width:1100px;
    margin:0 auto;
    width:100%;
}

/* ===== 统计条 — 底部总结 ===== */
.stats-bar {
    display:flex;
    gap:48px;
    padding:48px 0;
    margin-top:64px;
    border-top:1px solid rgba(232,220,199,0.15);
    border-bottom:1px solid rgba(232,220,199,0.10);
    border-radius:0;
}

.stat-item { display:flex; flex-direction:column; }

.stat-number {
    font-family:"Georgia","Times New Roman",serif;
    font-size:48px;
    font-weight:700;
    color:#E8DCC7;
    line-height:1;
    font-style:italic;
}

.stat-label {
    font-size:12px;
    color:rgba(232,220,199,0.55);
    letter-spacing:0.2em;
    margin-top:6px;
}

.stat-label-en {
    font-family:"Georgia","Times New Roman",serif;
    font-size:10px;
    color:rgba(232,220,199,0.55)
    font-style:italic;
    letter-spacing:0.12em;
    margin-top:2px;
}

/* ===== 时期区块 — 交替底色 ===== */
.era-section {
    margin-bottom:0;
    padding:56px 0;
}

/* 第一、三个时期：墨黑底 */
.era-section:nth-child(1) { background:transparent; }
/* 第二个时期：微朱砂底 */
.era-section:nth-child(2) {
    background:rgba(156,42,42,0.10);
    margin-left:-60px;
    margin-right:-60px;
    padding-left:60px;
    padding-right:60px;
}
.era-section:nth-child(3) { background:transparent; }

.era-header {
    display:flex;
    align-items:baseline;
    gap:16px;
    margin-bottom:40px;
}

.era-label {
    font-size:13px;
    letter-spacing:0.3em;
    color:rgba(232,220,199,0.7);
    font-weight:600;
}

.era-label-en {
    font-family:"Georgia","Times New Roman",serif;
    font-size:10px;
    color:rgba(232,220,199,0.55)
    font-style:italic;
    letter-spacing:0.15em;
}

/* ===== 事件时间轴 ===== */
.timeline { position:relative; padding-left:1px; }

.timeline::before {
    content:'';
    position:absolute;
    left:0; top:0; bottom:0;
    width:1px;
    background:rgba(232,220,199,0.12);
}

/* ===== 事件条目 ===== */
.timeline-item {
    position:relative;
    padding:24px 0 24px 32px;
    cursor:pointer;
    transition:transform 0.5s cubic-bezier(0.25,0.1,0.25,1), opacity 0.45s cubic-bezier(0.4,0,0.2,1);
    opacity:0;
    transform:translateY(20px) scale(1);
    border-left:1px solid transparent;
    margin-left:-1px;
}

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

/* hover 浮起：上移 + 放大15% + 左侧朱砂线 */
.timeline-item:hover {
    transform:translateY(-4px) scale(1.15);
    border-left-color:rgba(156,42,42,0.4);
}

/* 节点圆点 */
.timeline-item::before {
    content:'';
    position:absolute;
    left:-4px; top:32px;
    width:7px; height:7px;
    background:#2C221A;
    border:1.5px solid rgba(232,220,199,0.35);
    border-radius:50%;
    z-index:2;
    transition:all 0.45s cubic-bezier(0.4,0,0.2,1);
}

/* hover 朱砂点亮 */
.timeline-item:hover::before {
    background:#9C2A2A;
    border-color:#9C2A2A;
    box-shadow:0 0 0 12px rgba(156,42,42,0.10), 0 0 24px rgba(156,42,42,0.08);
    transform:scale(1.3);
}

/* 年份 */
.timeline-year {
    font-family:"Georgia","Times New Roman",serif;
    font-size:28px;
    font-weight:700;
    color:rgba(232,220,199,0.9);
    letter-spacing:0.04em;
    font-style:italic;
    margin-bottom:2px;
    transition:color 0.45s cubic-bezier(0.4,0,0.2,1);
}
.timeline-item:hover .timeline-year { color:#B04545; }

/* 标题行 */
.event-title-row { display:flex; align-items:baseline; gap:12px; }

.timeline-title {
    font-size:16px;
    font-weight:600;
    color:rgba(232,220,199,0.95);
    letter-spacing:0.06em;
    transition:color 0.45s cubic-bezier(0.4,0,0.2,1);
}
.timeline-item:hover .timeline-title { color:#E8DCC7; }

.timeline-title-en {
    font-family:"Georgia","Times New Roman",serif;
    font-size:10px;
    color:rgba(139,157,131,0.45);
    font-style:italic;
    letter-spacing:0.1em;
    white-space:nowrap;
    transition:color 0.45s cubic-bezier(0.4,0,0.2,1);
}
.timeline-item:hover .timeline-title-en { color:#8B9D83; }

/* 描述 */
.timeline-desc {
    font-size:12px;
    color:rgba(232,220,199,0.5);
    margin-top:6px;
    line-height:1.7;
    letter-spacing:0.03em;
    max-width:480px;
    transition:color 0.45s cubic-bezier(0.4,0,0.2,1);
}
.timeline-item:hover .timeline-desc { color:rgba(232,220,199,0.7); }

/* 查看详情 */
.view-hint {
    font-family:"Georgia","Times New Roman",serif;
    font-size:10px;
    color:transparent;
    font-style:italic;
    letter-spacing:0.1em;
    margin-top:6px;
    transition:all 0.45s cubic-bezier(0.4,0,0.2,1);
}
.timeline-item:hover .view-hint { color:#8B9D83; }

/* ===== 底部 ===== */
.footer {
    padding:48px 60px;
    border-top:1px solid rgba(232,220,199,0.12);
    position:relative; z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    max-width:1100px;
    margin:0 auto;
    width:100%;
    background:#2C221A;
}

.footer-quote { font-size:13px; color:rgba(232,220,199,0.5); letter-spacing:0.1em; }
.footer-quote-en {
    font-family:"Georgia","Times New Roman",serif;
    font-size:10px;
    color:rgba(232,220,199,0.5);
    font-style:italic;
    letter-spacing:0.12em;
    margin-top:4px;
}

.footer-nav { display:flex; gap:20px; align-items:center; }
.footer-nav a {
    color:rgba(232,220,199,0.5);
    text-decoration:none;
    font-size:11px;
    letter-spacing:0.1em;
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.footer-nav a:hover { color:#8B9D83; }
.footer-nav span { color:rgba(232,220,199,0.1); }

/* ===== 手机 ===== */
@media (max-width:768px) {
    .header { padding:60px 24px 48px; }
    .header::before { left:16px; top:50px; width:220px; height:100px; }
    .site-title { font-size:38px; letter-spacing:0.08em; }
    .site-nav { gap:20px; flex-wrap:wrap; }
    .main-container { padding:0 24px 64px; }
    .stats-bar {
        gap:24px; padding:32px 0;
        margin-top:48px;
    }
    .stat-number { font-size:34px; }
    .era-section:nth-child(2) {
        margin-left:-24px; margin-right:-24px;
        padding-left:24px; padding-right:24px;
    }
    .timeline-item { padding:20px 0 20px 24px; }
    .footer { padding:32px 24px; flex-direction:column; gap:16px; }
}