/* ═══════════════════════════════════════════════
   GUZANG · 电子杂志风格 · 共享基础样式
   ═══════════════════════════════════════════════ */
:root{
  --paper:#f7f4ee;--paper-2:#efe9de;--paper-3:#e8e2d5;
  --ink:#1d2733;--ink-2:#5a6675;--ink-3:#8a94a0;
  --red:#b23a2e;--red-2:#d35a48;--red-light:#fdf1ee;--red-border:#f0d9d5;
  --navy:#0f2a4a;--navy-2:#1b3a5f;--navy-3:#2c4f79;
  --ok:#33705f;--warn:#a0671f;--white:#ffffff;
  --line:#d8d0c2;--line-2:#c4baa8;
  --serif:"Noto Serif SC","Georgia","Songti SC","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --mono:Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.75;font-size:15.5px}
a{color:var(--navy-2);text-decoration:none;border-bottom:1px solid rgba(27,58,95,.25)}
a:hover{color:var(--red);border-bottom-color:var(--red)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ═══ 顶部导航 ═══ */
.nav{position:sticky;top:0;z-index:100;background:rgba(247,244,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:54px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy);letter-spacing:.02em;font-size:15.5px;white-space:nowrap}
.brand a{color:inherit;border:0;display:flex;align-items:center;gap:10px}
.brand .mark{width:36px;height:36px;vertical-align:middle;border-radius:4px}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{border:0;color:var(--ink-2);font-size:13.5px;font-weight:500;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--navy)}
.nav-links a.on{position:relative}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-17px;height:2px;background:var(--red)}
@media(max-width:820px){.nav-links{overflow-x:auto;display:flex;-webkit-overflow-scrolling:touch}}

/* ═══ 页头 · 杂志封面 ═══ */
.page-head{background:var(--navy);color:#e8eef6;padding:52px 0 58px;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;opacity:.15;pointer-events:none;
  background-image:linear-gradient(rgba(232,238,246,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(232,238,246,.08) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 80% 90% at 60% 0%,#000 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 60% 0%,#000 20%,transparent 100%)}
.page-head .wrap{position:relative;z-index:2}
.page-head .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:#8fb0d6;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.page-head .kicker::before{content:"";width:24px;height:2px;background:var(--red-2);display:inline-block}
.page-head h1{font-family:var(--serif);font-size:clamp(26px,3.8vw,38px);font-weight:900;line-height:1.3;letter-spacing:.02em}
.page-head p{margin-top:12px;max-width:640px;color:#b9cbe2;font-size:14.5px;line-height:1.7}

/* ═══ 内容区通用 ═══ */
section{padding:52px 0}
.alt{background:var(--paper-2)}
.section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.section-no{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.12em;white-space:nowrap}
.section-title{font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--navy)}
.section-desc{color:var(--ink-2);max-width:780px;margin-bottom:26px;font-size:14.5px}

/* ═══ 卡片 · 无阴影，左侧/顶部border ═══ */
.card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:22px 24px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)}
.card:hover::before{background:var(--red)}
.card h3{font-family:var(--serif);font-size:17px;color:var(--navy);font-weight:700;margin-bottom:6px}
.card p{font-size:13.5px;color:var(--ink-2);line-height:1.7}

/* ═══ 按钮 ═══ */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:10px 22px;border:1px solid var(--line);background:var(--white);color:var(--navy);border-radius:2px;cursor:pointer;transition:all .2s;font-family:var(--sans);text-decoration:none}
.btn:hover{border-color:var(--red);color:var(--red);background:var(--white)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:var(--white)}
.btn-primary:hover{background:var(--navy-2)}
.btn-red{background:var(--red);border-color:var(--red);color:var(--white)}
.btn-red:hover{background:var(--red-2)}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn-sm{font-size:12.5px;padding:6px 14px}
.btn-pill{border-radius:999px}

/* ═══ 标签 ═══ */
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--red);font-weight:700}
.tag-navy{color:var(--navy)}
.tag-pill{background:var(--paper-2);color:var(--ink-2);padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500}

/* ═══ 表格 ═══ */
.table-box{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--white);color:var(--navy);text-align:left;padding:10px 14px;font-weight:700;border-bottom:2px solid var(--line);font-size:12.5px;white-space:nowrap}
td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
tr:last-child td{border-bottom:none}
td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}

/* ═══ 标注块 ═══ */
.callout{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:6px;padding:14px 18px;margin:16px 0}
.callout p{font-size:13.5px;color:var(--ink-2);margin-bottom:5px;line-height:1.7}
.callout p:last-child{margin-bottom:0}
.callout b{color:var(--navy)}

/* ═══ 标题字 ═══ */
h1,h2,h3,h4,h5{font-family:var(--serif)}
h1{font-size:clamp(26px,3.8vw,38px);font-weight:900;line-height:1.3}
h2{font-size:clamp(20px,2.8vw,28px);font-weight:800;line-height:1.35}
h3{font-size:clamp(17px,2.2vw,22px);font-weight:700;line-height:1.4}
h4{font-size:16px;font-weight:700;line-height:1.45}

/* ═══ 高亮文本 ═══ */
.hl{background:var(--red-light);color:var(--red);border-bottom:2px solid var(--red);font-weight:700;padding:0 4px;border-radius:2px}

/* ═══ Footer ═══ */
footer{background:var(--navy);color:#9db3cd;padding:36px 0;margin-top:60px}
footer .wrap{display:flex;flex-direction:column;gap:8px}
footer .line{font-size:13px}
footer a{color:#cfe0f2;border-color:rgba(207,224,242,.4)}

/* ═══ 响应式 ═══ */
@media(max-width:820px){
  .wrap{padding:0 16px}
  section{padding:36px 0}
}
@media print{
  .nav{display:none}
  body{background:#fff}
}