:root{
    /* 主色：靛蓝 #3e50b3 */
    --brand:        #3E50B3;
    --brand-dark:   #2C3A85;
    --brand-deep:   #1E2A5A;
    --brand-tint:   #EEF0FA;
    --brand-tint-2: #DFE3F6;
    --brand-hover:  #D5DCF3;      /* 悬浮背景：加深一档 */
    --brand-hover-deep: #C6CFEE;  /* 叠加纹路后的等效色，给小三角用 */
    --gold:         #B98A3E;      /* 年份 / 点缀 */
    --archive-img: url('../images/new-lsyg.png');
    --paper:    #F7F8FC;
    --card:     #FFFFFF;
    --ink:      #1F2430;
    --ink-soft: #5C6273;
    --ink-mute: #8B90A0;
    --line:     #E2E5F0;
    --gutter: 6rem;
    --radius: 4px;
}



section#memoir {
    margin-bottom: 10rem;
}

/* ===================== 顶部滚动进度条 ===================== */
.scroll-progress{
    position:fixed;
    top:0;left:0;
    width:100%;height:3px;
    background:var(--brand);
    transform:scaleX(0);
    transform-origin:0 50%;
    z-index:999;
}

/* ===================== 通用：饕餮纹悬浮底纹 ===================== */
/* 素材图用主色渐变染色后叠在底部，默认透明，悬浮淡入 */
.textured{position:relative;isolation:isolate}
.textured::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:linear-gradient(120deg, rgba(62,80,179,.62), rgba(30,42,90,.62)), var(--archive-img);
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity .45s ease;
    z-index:-1;
    pointer-events:none;
}
.textured:hover::before{opacity:.22}

/* ===================== 通用：入场动画 ===================== */
.reveal{transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.from-left{transform:translate(-36px, 16px)}
.js .reveal.from-right{transform:translate(36px, 16px)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .js .reveal{opacity:1;transform:none;transition:none}
}

.section-title{
    position:relative;
    font-size: 2.7rem;
    color:var(--brand-deep);
    padding-left:1.1rem;
    margin-bottom:3rem;
    letter-spacing:.06em;
}
.section-title::before{
    content:'';
    position:absolute;
    left:0;
    top: 0.15em;
    bottom: .15em;
    width:4px;
    background:var(--brand);
    border-radius:2px;
}
.section-title .en{
    display:block;
    font-family:var(--font-sans);
    font-size: 1.7rem;
    letter-spacing:.4em;
    color:var(--brand);
    opacity:.65;
    margin-bottom: 1.3rem;
}

/* ===================== 时间轴：居中交错 ===================== */
.timeline{scroll-margin-top:74px;margin-bottom:5.5rem}
.timeline-list{list-style:none;position:relative;padding:0;}
/* 中轴线 */
.timeline-list::before{
    content:'';
    position:absolute;
    left:50%;top:0;bottom:0;
    width:2px;
    transform:translateX(-50%);
    background:linear-gradient(to bottom,
        rgba(62,80,179,0) 0%,
        var(--brand-tint-2) 6%,
        var(--brand-tint-2) 92%,
        rgba(62,80,179,0) 100%);
}
.timeline-item{
    display:grid;
    grid-template-columns:1fr 88px 1fr;
    align-items:start;
    padding-bottom:2.6rem;
}
/* 轴节点 */
.timeline-marker{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    margin-top:1.7rem;
    width:14px;height:14px;
    border-radius:50%;
    background:var(--paper);
    border:3px solid var(--brand);
    box-shadow:0 0 0 5px rgba(62,80,179,.10);
    transition:background-color .3s, transform .3s, box-shadow .3s;
}
.timeline-item:hover .timeline-marker{
    background:var(--brand);
    transform:scale(1.2);
    box-shadow:0 0 0 9px rgba(62,80,179,.14);
}
.timeline-card{
    grid-row:1;
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:1.5rem 1.8rem;
    transition:background-color .3s, border-color .3s, box-shadow .3s, transform .3s;
}
/* 奇数项在左、偶数项在右 */
.timeline-item:nth-of-type(odd)  .timeline-card{grid-column:1;text-align:right}
.timeline-item:nth-of-type(even) .timeline-card{grid-column:3;text-align:left}
/* 指向轴线的小三角 */
.timeline-card::after{
    content:'';
    position:absolute;
    top:1.85rem;
    width:10px;height:10px;
    background:var(--card);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    transform:rotate(-45deg);
    transition:border-color .3s, background-color .3s;
}
.timeline-item:nth-of-type(odd)  .timeline-card::after{right:-6px}
.timeline-item:nth-of-type(even) .timeline-card::after{left:-6px;transform:rotate(135deg)}

.timeline-year{
    display:block;
    font-family:var(--font-serif);
    font-size: 2.8rem;
    font-weight:700;
    line-height:1.1;
    color:var(--gold);
    letter-spacing:.03em;
    margin-bottom:.2rem;
}
.timeline-card h3{font-size: 2rem;color:var(--brand-deep);margin-bottom: 1.35rem;}
.timeline-card p{color:var(--ink-soft);font-size: 1.56rem;}

.timeline-card:hover{
    background:var(--brand-hover);
    border-color:var(--brand);
    box-shadow:0 12px 28px rgba(62,80,179,.16);
}
/* 卡片面积小且底色已加深，纹路要比文章行更重才看得出来 */
.timeline-card.textured:hover::before{opacity:.34}
/* 悬浮时朝中轴线轻微靠拢并抬起 */
.timeline-item:nth-of-type(odd)  .timeline-card:hover{transform:translate(4px,-3px)}
.timeline-item:nth-of-type(even) .timeline-card:hover{transform:translate(-4px,-3px)}
/* 三角同步压深，避免「卡片有纹路、三角是纯色」露馅 */
.timeline-card.textured:hover::after{background:var(--brand-hover-deep);border-color:var(--brand)}
.timeline-card:hover .timeline-year{color:var(--brand)}

/* ===================== 回忆文章：列表式 ===================== */
.posts{scroll-margin-top:74px;border-top:1px solid var(--line)}
.post{
    display:grid;
    grid-template-columns:132px 1fr auto;
    align-items:center;
    gap: 4.6rem;
    padding:1.6rem 1.2rem;
    border-bottom:1px solid var(--line);
    box-shadow:inset 3px 0 0 transparent;
    transition:background-color .3s, box-shadow .3s;
}
.post:hover{
    background:var(--brand-hover);
    box-shadow:inset 3px 0 0 var(--brand);
}
/* 缩略图 + 叠放的日期标签 */
.post-thumb{
    position:relative;
    width: 162px;
    height: 118px;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--brand-tint-2);
}
.post-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.post:hover .post-thumb img{transform:scale(1.1)}


.thumb-date{
    position:absolute;
    left:0;
    bottom:0;
    padding:.2rem .6rem;
    background:rgba(30,42,90,.88);
    color:#fff;
    font-size: 1.2rem;
    letter-spacing:.08em;
    transition:background-color .3s;
}
.post:hover .thumb-date{background:var(--brand)}
.post-body h3{font-size: 2.18rem;color:var(--brand-deep);margin-bottom: 1.3rem;transition:color .3s}
.post:hover .post-body h3{color:var(--brand)}
.post-meta{font-size: 1.82rem;color:var(--ink-mute);letter-spacing: 0.05em;margin-bottom: 1.4rem;}
.post-desc{color:var(--ink-soft);font-size: 1.54rem;}
.post-more{
    font-size: 1.5rem;
    color:var(--brand);
    white-space:nowrap;
    padding:.4rem .9rem;
    background:var(--brand-tint);
    border:1px solid var(--brand-tint-2);
    border-radius:999px;
    transition:background-color .3s, color .3s, border-color .3s;
}
.post:hover .post-more{background:var(--brand);border-color:var(--brand);color:#fff}

/* ===================== 页脚 ===================== */
footer{
    margin-top:5rem;
    padding:3rem var(--gutter);
    background:var(--brand-deep);
    color:rgba(255,255,255,.6);
    text-align:center;
    font-size:.88rem;
    letter-spacing:.08em;
}

/* ===================== 响应式 ===================== */
@media (max-width:1100px){
    :root{--gutter:3rem}
    .banner-inner h1{font-size:2.6rem}
}
@media (max-width:860px){
    :root{--gutter:1.5rem}
    .header-banner{min-height:320px}
    .banner-inner{padding:2.5rem var(--gutter)}
    .banner-inner h1{font-size:2.1rem}
    .container{padding:3rem var(--gutter)}

    /* 时间轴：中轴 -> 左轴，全部卡片靠右 */
    .timeline-list::before{left:7px;transform:none}
    .timeline-item{grid-template-columns:16px 1fr;column-gap:1.2rem;padding-bottom:1.6rem}
    .timeline-marker{grid-column:1;margin-top:1.6rem}
    .timeline-item:nth-of-type(odd)  .timeline-card,
    .timeline-item:nth-of-type(even) .timeline-card{grid-column:2;text-align:left}
    .timeline-item:nth-of-type(odd)  .timeline-card::after,
    .timeline-item:nth-of-type(even) .timeline-card::after{left:-6px;right:auto;transform:rotate(135deg)}
    .timeline-item:nth-of-type(odd)  .timeline-card:hover,
    .timeline-item:nth-of-type(even) .timeline-card:hover{transform:translateX(3px)}

    /* 文章：缩略图缩窄，按钮换到第二列 */
    .post{grid-template-columns:104px 1fr;gap:1rem;align-items:start;padding:1.3rem 1rem}
    .post-thumb{width:104px;height:70px}
    .post-more{grid-column:2;justify-self:start;margin-top:-.4rem}
}