:root{
  --bg-ivory:#fbf8f4;          /* 象牙白 */
  --deep-purple:#415e94;      /* 设计种子色 */
  --deep-gray:#2f2f35;        /* 深紫灰近似 */
  --text:#222222;
  --muted:#6b6b6b;
  --max-width:1320px;         /* 在1120-1440区间，可调整 */
  --gutter:20px;
}

/* 基础重置与版式 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--text);
  background:var(--bg-ivory);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

.masthead{
  background:linear-gradient(180deg,var(--deep-gray),var(--deep-purple) 75%);
  color:#fff;
  padding:10px var(--gutter);
}
.masthead-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:0.95}
.masthead-identity{font-weight:600}
.masthead-time{font-size:12px;color:rgba(255,255,255,0.9)}
.masthead-row{display:flex;justify-content:space-between;align-items:flex-end;padding:6px 0}
.masthead-brand{font-size:20px;font-weight:700;letter-spacing:0.2px}
.masthead-keywords{font-size:13px;opacity:0.95}
.masthead .kw{background:transparent;border:0;padding:0;margin-left:6px;color:rgba(255,255,255,0.95)}

.ad{padding:12px var(--gutter);background:transparent;color:var(--muted);font-size:13px}
.ad-top,.ad-middle,.ad-bottom{border-top:1px solid rgba(0,0,0,0.04)}

.page-wrap{
  display:grid;
  grid-template-columns: auto 1fr auto; /* left-pillar | main-grid | meta-edge */
  gap:0;
  justify-content:center;
  padding:18px;
}

/* 左侧刊头 */
.left-pillar{
  display:none; /* 仅桌面显示 */
  padding-right:18px;
}
.left-pillar .pillar-block{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:var(--deep-gray);font-weight:700}

/* 中央网格：使用12列语义化占位（视觉上为8+4） */
.main-grid{
  width:100%;
  max-width:var(--max-width);
  display:grid;
  grid-template-columns:1fr; /* mobile fallback */
  gap:24px;
}

.article{background:#fff;padding:18px;border:1px solid rgba(0,0,0,0.04)}
.article-header h1{margin:0 0 8px 0;font-size:22px;line-height:1.15;font-weight:800;letter-spacing:0}
.article-meta-row{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}
.article-meta-row .desc-text{color:var(--deep-gray)}

.article-body{margin-top:14px;color:var(--deep-gray);line-height:1.75}
.article-body p{margin:0 0 14px 0}

/* FAQ 区块：顶部主题色边线 */
.faq{border-top:4px solid var(--deep-purple);padding-top:12px;margin-top:18px}
.faq h2{margin:0 0 10px 0;font-size:16px}
.faq-body{color:var(--deep-gray)}

/* 编辑推荐侧栏 */
.side-reco{background:transparent;padding:0 0}
.side-reco h3{margin:0 0 12px 0;font-size:15px;border-bottom:1px solid rgba(0,0,0,0.06);padding-bottom:8px}
.related-list{display:block;border-top:0}
.related-list > *{display:block;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.06);color:var(--deep-gray)}

/* 元信息边沿（仅桌面） */
.meta-edge{display:none;align-items:center;padding-left:18px}
.meta-edge .edge-item{display:flex;flex-direction:column;align-items:flex-start;font-size:12px;color:var(--muted);padding:8px 0}
.meta-edge .edge-label{font-weight:700;color:var(--deep-gray);margin-bottom:6px}

.site-footer{padding:18px;color:var(--muted);font-size:13px;text-align:center;border-top:1px solid rgba(0,0,0,0.04);background:transparent}

/* ---------- 桌面规则（>=1024px） ---------- */
@media (min-width:1024px){
  :root{--max-width:1280px}
  .page-wrap{padding:28px}
  .left-pillar{display:block;min-width:56px}

  /* main-grid 为 12 列语义化布局：左边文章占 8/12，右侧为 4/12 */
  .main-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
  .article{grid-column:1 / 2}
  .side-reco{grid-column:2 / 3}

  /* 元信息沿边缘纵向排列并固定在右侧视觉条 */
  .meta-edge{display:flex;flex-direction:column;min-width:120px;padding-left:22px}
  .meta-edge .edge-item{border-left:3px solid var(--deep-purple);padding-left:12px;margin-bottom:12px;background:#fff;padding-top:8px;padding-bottom:8px}

  /* 报刊式元素：标题与摘要通栏（已实现在 article header） */
  .masthead{padding:14px 32px}
  .masthead-brand{font-size:24px}
  .article-header h1{font-size:26px}
}

/* ---------- 手机规则（<=767px） ---------- */
@media (max-width:767px){
  :root{--max-width:680px}
  body{padding:0}
  .masthead{padding:8px 12px}
  .masthead-top{font-size:12px}

  /* 报头压缩为一行（site & time 同行） */
  .masthead-row{display:none}
  .masthead-identity{font-weight:700}

  /* 单列流式布局：所有栏目单列，侧栏下移 */
  .page-wrap{display:block;padding:10px}
  .left-pillar{display:none}
  .main-grid{display:block;margin:0 auto;max-width:100%}
  .article{border:0;padding:12px}
  .side-reco{margin-top:18px;padding:12px;background:#fff;border-top:1px solid rgba(0,0,0,0.04)}
  .meta-edge{display:none}

  /* 保证在320px下不横向滚动 */
  html,body{overflow-x:hidden}
  .article-body{word-break:break-word}
  .article-header h1{font-size:18px}
}

/* 细节：去掉圆角与重阴影，采用分隔线而非卡片 */
.article, .side-reco, .faq{border-radius:0}
*{box-shadow:none}