/* 基础变量与重置 */
:root{
  --navy:#0b2340; /* 海军蓝 */
  --mist:#f3f6f8; /* 浅雾灰 */
  --text:#111216;
  --muted:#666f78;
  --accent:#0b2340;
  --container-max:1280px;
  --baseline:1.6rem; /* 基线间距基准 */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: system-ui,-apple-system,"Segoe UI",Roboto, "Noto Sans CJK SC", "Hiragino Sans GB", "Microsoft Yahei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;color:var(--text);background:var(--mist);}
a{color:inherit;text-decoration:none}
.sr{position:absolute;border:0;padding:0;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* 布局根 */
.layout-root{display:flex;min-height:100vh}

/* 左侧刊头（纵向） */
.masthead{background:linear-gradient(180deg,var(--navy),#052033);color:#fff;padding:22px 18px;min-width:160px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.masthead .brand{font-weight:700;font-size:18px;letter-spacing:0.4px;color:#fff}
.masthead .mast-nav{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.mast-nav .nav-item{font-size:13px;opacity:0.95;padding:6px 8px;border-radius:2px}
.masthead .year{margin-top:auto;font-size:12px;opacity:0.7}

/* 站点主体容器：桌面宽度受限在1120-1440区间内（使用1280为中位） */
.site-wrap{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:transparent;border-bottom:1px solid rgba(11,35,64,0.06)}
.top-nav{display:flex;gap:10px;font-size:13px;color:var(--muted);padding:8px 18px}
.top-nav .nav-sep{opacity:0.5}

/* 内容区容器 */
.content-area{padding:18px}
.grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}

/* 文章主区 */
.article{background:#ffffff;padding:22px;border-radius:2px;color:var(--text);box-shadow:0 0 0 1px rgba(2,6,23,0.02) inset}
.title-row{display:grid;grid-template-columns:1fr 220px;gap:18px;align-items:start;margin-bottom:8px}
.title{font-size:28px;line-height:1.08;margin:0;font-weight:700}
.meta-col{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.meta-col .keyword-box{background:var(--mist);padding:8px;border-radius:2px;color:var(--text);font-size:13px}
.summary{color:var(--muted);margin:8px 0 18px;font-size:15px}

/* 正文区：双层基线网格视觉特征（视觉签名） */
.article-content{font-size:16px;line-height:var(--baseline);color:var(--text);position:relative;padding:4px 0}
/* 双层基线：细线每 0.8*baseline 叠加主线每 baseline */
.article-content{
  background-image:
    repeating-linear-gradient(to bottom, rgba(11,35,64,0.02) 0, rgba(11,35,64,0.02) 1px, transparent 1px, transparent calc(var(--baseline) * 0.5 - 1px)),
    repeating-linear-gradient(to bottom, rgba(11,35,64,0.03) 0, rgba(11,35,64,0.03) 1px, transparent 1px, transparent calc(var(--baseline) - 1px));
  background-position: left top, left top;
  background-repeat: repeat-y;
  background-size: 100% 0.5rem, 100% 1rem;
}
.article-content p{margin:0 0 1rem}
.article-content h2, .article-content h3{margin:1.2rem 0 0.6rem}
.article-content ul, .article-content ol{margin:0 0 1rem 1.2rem}

/* 广告容器为独立静态块 */
.ad{background: #f8fafb;border:1px dashed rgba(11,35,64,0.06);padding:12px;margin:14px 0;color:var(--muted);font-size:13px}

/* FAQ 使用无卡片的 details 列表 */
.faq details{border-top:1px solid rgba(11,35,64,0.04);padding:10px 0}
.faq summary{cursor:pointer;font-weight:600;padding:6px 0;list-style:none;outline:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:8px 0 0;color:var(--muted)}

/* 相关阅读编号列表 */
.related-title{font-size:14px;margin:18px 0 8px}
.related-list{padding-left:18px;margin:0;font-size:14px;color:var(--muted)}
.related-list > li{margin:6px 0}

/* 侧栏块：方形信息块风格 */
.sidebar{display:flex;flex-direction:column;gap:12px}
.info-block{background:#fff;padding:12px;border:1px solid rgba(2,6,23,0.04)}
.info-block.square{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center}
.ib-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.ib-body{font-size:14px}

/* 页脚 */
.site-footer{padding:16px 18px;color:var(--muted);font-size:13px}

/* --- 桌面样式（min-width:1024px） --- */
@media (min-width:1024px){
  .site-wrap{padding:20px 28px}
  /* 强制容器在 1120px—1440px 之间 */
  .content-area{display:flex;justify-content:center}
  .content-area > .grid{width:var(--container-max);min-width:1120px;max-width:1440px;grid-template-columns: 1fr;}
  /* 主网格：9/3 分栏（约75%/25%） */
  .grid{grid-template-columns: 3fr 1fr;gap:28px}

  /* 标题与元信息：窄列显示 */
  .title{font-size:32px}
  .meta-col{padding-top:6px}

  /* 顶部窄导航显示为单行 */
  .top-nav{display:flex}

  /* 左侧刊头与内容并列：masthead 固定宽度 */
  .layout-root{align-items:stretch}
}

/* --- 手机端样式（max-width:767px） --- */
@media (max-width:767px){
  /* 纵向刊头不占用整屏，改为顶部简化条 */
  .masthead{min-width:64px;padding:10px 12px;flex-direction:row;align-items:center;gap:10px}
  .masthead .mast-nav{display:none}
  .masthead .brand{font-size:15px}
  .masthead .year{display:none}

  /* 顶部窄导航取消（mobile_contract） */
  .top-nav{display:none}

  /* 主体容器改为单列，侧栏下移成区块 */
  .layout-root{flex-direction:column}
  .site-wrap{padding:12px}
  .grid{grid-template-columns:1fr;gap:12px}
  .title-row{grid-template-columns:1fr;gap:8px}
  .meta-col{flex-direction:row;gap:10px;font-size:13px}
  .meta-col .keyword-box{display:none}

  .article{padding:16px}
  .title{font-size:20px}
  .summary{font-size:14px}

  /* 侧栏转为后置区块，保持方形感在可能的宽度下适配 */
  .sidebar{order:3}

  /* 基线适当缩小以适配移动阅读 */
  :root{--baseline:1.45rem}
  .article-content{background-size:100% 0.45rem, 100% 0.9rem}
}

/* 避免横向滚动、文字截断、控件重叠 */
body, .layout-root, .site-wrap, .grid, .article, .sidebar{min-width:0}

/* 禁止圆角过大、重阴影、头像卡片等被禁用的样式 */
.info-block, .article{border-radius:2px}