:root{
 --paper:#F6F3EA;
 --paper-2:#EFEAE0;
 --card:#FFFFFF;
 --ink:#26332E;
 --ink-soft:#5A6A63;
 --ink-faint:#8B988F;
 --teal:#2F6B5E;
 --teal-deep:#214C42;
 --teal-tint:#E7EFEB;
 --verm:#C1522E;
 --verm-deep:#9C3E20;
 --verm-tint:#F7E7E0;
 --gold:#B57E2C;
 --line:#E5DED0;
 --line-soft:#EFEAE0;
 --shadow-card:0 2px 14px -4px rgba(38,51,46,.14);
 --serif:"Noto Serif SC","Songti SC","SimSun",serif;
 --sans:"Noto Sans SC","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
 --maxw:980px;/* 桌面加宽，减少左右空白 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.9;font-size:16px;-webkit-font-smoothing:antialiased}
::selection{background:var(--teal);color:#fff}
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--ink);line-height:1.4}
p{margin:0 0 1em}
a{color:var(--teal);text-decoration:none}
/* 顶部小条 */
.topbar{background:var(--teal-deep);color:#EAEFEB}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.06em}
.topbar .seal{width:26px;height:26px;flex:0 0 auto;background:var(--verm);color:#fff;border-radius:6px;display:grid;place-items:center;font-size:14px;font-weight:700}
.topbar span:last-child{margin-left:auto;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.1em;opacity:.8}
/* Hero */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;background:radial-gradient(680px 340px at 14% -8%,rgba(47,107,94,.16),transparent 58%),radial-gradient(560px 300px at 90% 6%,rgba(193,82,46,.10),transparent 55%)}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:60px 24px 46px;text-align:center}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.18em;color:var(--verm-deep);font-weight:500;margin-bottom:18px}
.hero-kicker::before,.hero-kicker::after{content:"";width:28px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(26px,5vw,38px);font-weight:900;margin:0 0 16px;line-height:1.35}
.hero h1 .accent{color:var(--teal)}
.hero .sub{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--teal-deep);margin-bottom:10px}
.hero .years{display:inline-block;background:var(--verm-tint);color:var(--verm-deep);font-size:13px;font-weight:600;border-radius:999px;padding:4px 16px;letter-spacing:.05em}
.hero p.lead{max-width:720px;margin:20px auto 0;color:var(--ink-soft);font-size:14.5px}
/* 正文信笺 */
.content{max-width:var(--maxw);margin:0 auto;padding:40px 24px 64px}
.letter{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);padding:44px 40px 34px;position:relative;overflow:hidden}
.letter::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--teal),var(--verm))}
.letter::after{content:"";position:absolute;right:0;top:0;width:120px;height:120px;background:radial-gradient(circle at 100% 0,rgba(181,126,44,.06),transparent 70%);pointer-events:none}
/* 信首问候 */
.greet{font-family:var(--serif);font-size:18px;font-weight:600;margin:0 0 22px;color:var(--teal-deep)}
.greet::after{content:"";display:block;width:56px;height:3px;background:var(--verm);border-radius:2px;margin-top:10px}
.opening{font-size:15.5px;color:var(--ink);text-indent:1.5em;}
.opening .hl{color:var(--verm-deep);font-weight:600}
/* 时间轴：桌面三列；手机自动单列 */
.timeline{margin:30px 0 12px}
.t-row{display:grid;grid-template-columns:112px 44px 1fr;gap:0 14px}
.t-year{font-family:var(--serif);font-weight:900;font-size:20px;color:var(--teal-deep);text-align:right;padding-top:6px;white-space:nowrap;letter-spacing:.02em}
.t-year small{display:block;font-family:var(--sans);font-weight:500;font-size:11.5px;color:var(--ink-faint);letter-spacing:.12em;margin-top:2px}
.t-axis{position:relative;display:flex;justify-content:center}
.t-axis::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:var(--line)}
.t-axis .dot{position:relative;width:13px;height:13px;border-radius:50%;background:var(--verm);border:3px solid var(--paper);box-shadow:0 0 0 1.5px var(--verm);margin-top:7px;z-index:1}
.t-content{background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;padding:16px 18px 42px}
.t-row:last-child .t-content{padding-bottom:16px}
.t-content h3{font-size:16px;margin:0 0 8px;color:var(--verm-deep);font-weight:700}
.t-content p{font-size:14.5px;margin:0 0 .7em;color:var(--ink)}
.t-content p:last-child{margin-bottom:0}
.t-content .sig-line{color:var(--ink-faint);font-size:12.5px;margin-top:8px}
.t-content .place{font-family:var(--serif);font-weight:600;color:var(--teal);font-size:14px}
/* 结语落款 */
.closing{margin:34px 0 0;text-align:center}
.closing .couplet{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--teal-deep);margin-bottom:14px}
.closing .couplet .q{color:var(--verm-deep)}
.closing .wish{font-size:14.5px;color:var(--ink-soft);line-height:2.1}
.sign{display:flex;align-items:flex-end;justify-content:flex-end;gap:18px;margin-top:34px;padding-top:18px;border-top:1px dashed var(--line)}
.sign .who{text-align:right}
.sign .who b{font-family:var(--serif);font-size:17px;color:var(--teal-deep);display:block;margin-bottom:2px}
.sign .who span{font-size:13px;color:var(--ink-faint)}
.seal{width:52px;height:52px;flex:0 0 auto;background:var(--verm);color:#fff;border-radius:10px;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:22px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
/* 页脚 */
footer{border-top:1px solid var(--line);background:var(--paper-2)}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:28px 20px 34px;text-align:center;font-size:12.5px;color:var(--ink-faint)}
.foot-inner .f-brand{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:15px;margin-bottom:6px;letter-spacing:.04em}

/* ========== 【新增】港澳台侨分类卡片模块（已移除左上角橙色色块代码） ========== */
.card-group{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:24px;
}
.category-card{
    position:relative;
    background:var(--card);
    border-radius:24px;
    padding:40px 24px;
    overflow:hidden;
}
/* 原橙色角块伪元素已删除，不再生成色块 */
.card-icon-wrap{
    position:relative;
    width:120px;
    height:120px;
    margin-bottom:24px;
}
.card-icon{
    width:100%;
    height:100%;
    object-fit:contain;
}
.card-title{
    font-family:var(--serif);
    font-size:42px;
    color:var(--ink);
    margin:0 0 8px;
    font-weight:500;
}
.card-en{
    font-family:var(--serif);
    font-size:28px;
    color:var(--ink);
    opacity:0.85;
    margin:0;
}

/* ========== 移动端适配（统一合并） ========== */
@media (max-width:992px){
    .card-group{
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width:768px){
    .letter{padding:28px 20px 24px}
    .t-row{ grid-template-columns: 1fr; gap:12px 0; margin-bottom:24px; }
    .t-year{text-align:left;padding:0;}
    .t-axis{justify-content:flex-start;}
    .t-axis::before{left:6px;transform:none;}
    .t-axis .dot{margin-top:0;}
    .t-content{padding:16px 16px 20px;}
    .hero-inner{padding:46px 18px 38px}
    .opening{text-indent:1.2em;}
}
@media (max-width:576px){
    .card-group{
        grid-template-columns: 1fr;
    }
    .card-title{
        font-size:32px;
    }
    .card-en{
        font-size:22px;
    }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}