/* 设计 CSS - palette: 深棕与奶油白；视觉签名：正文双层基线网格感 */
:root{
  --bg:#f7f3ec; /* 奶油白 */
  --panel:#fff; 
  --accent:#5a3b2a; /* 深棕 */
  --muted:#856a59;
  --text:#2b211d;
  --line:rgba(90,59,42,0.06);
  --major-line:rgba(90,59,42,0.10);
  --max-width:1280px;
  --min-width:1120px;
  --content-gap:28px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:16px;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);margin:0}
.page-shell{display:flex;flex-direction:column;min-height:100%}
.masthead{background:transparent;padding:14px 20px;border-bottom:1px solid rgba(0,0,0,0.04)}
.masthead-inner{display:flex;align-items:center;gap:18px}
.site-logo{color:var(--accent);font-weight:700;text-decoration:none;font-size:18px}
.mini-nav{display:flex;gap:12px;color:var(--muted);font-size:13px}
.mini-nav .nav-item{padding:6px 8px;border-radius:4px}

.site-inner{margin:28px auto; padding:0 20px; width:clamp(var(--min-width), 92%, var(--max-width));}
.layout{display:grid;grid-template-columns:220px 1fr 260px;gap:36px;align-items:start}

.col-left{color:var(--muted);font-size:13px;padding-top:6px}
.col-left .vertical-label{writing-mode:vertical-rl;text-orientation:mixed;color:var(--accent);font-weight:600;margin-bottom:12px}
.site-id .site-home{color:var(--accent);text-decoration:none;font-weight:700}
.compact-note{margin-top:10px;font-size:12px;color:var(--muted)}

.col-main{background:transparent}
.article-header{padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid rgba(0,0,0,0.04)}
.title-row{display:grid;grid-template-columns:1fr 160px;gap:18px;align-items:start}
h1{font-size:28px;line-height:1.08;margin:0;color:var(--accent);font-weight:800}
.meta-narrow{font-size:13px;color:var(--muted);text-align:right}
.meta-narrow .meta-key{font-weight:600;margin-bottom:6px}
.meta-row{display:flex;gap:18px;align-items:center;margin-top:10px;font-size:13px;color:var(--muted)}
.summary{margin:16px 0 8px;color:var(--muted);font-size:15px}

/* 视觉签名：正文双层基线网格感 */
.article-content{background:transparent;padding:22px 10px;line-height:1.55;font-size:15px;color:var(--text);
  /* 两层基线：次要线（每8px）与主线（每24px） */
  background-image:repeating-linear-gradient(transparent, transparent 7px, var(--line) 8px),
                    repeating-linear-gradient(transparent, transparent 23px, var(--major-line) 24px);
  background-position:0 0,0 0;
  background-size:100% auto;
}
.article-content p{margin:0 0 12px}
.article-content > h2{margin-top:18px;margin-bottom:8px;font-size:18px;color:var(--accent)}
.article-content blockquote{border-left:3px solid rgba(90,59,42,0.08);padding-left:12px;color:var(--muted);margin:12px 0}

.col-right .panel{background:var(--panel);padding:14px;border-radius:4px}
.panel-title{margin:0 0 8px;font-size:14px;color:var(--accent)}
.panel-item{font-size:13px;color:var(--muted);margin:6px 0}
.muted{color:var(--muted)}

.bottom-wide{margin-top:40px;display:grid;grid-template-columns:1fr;gap:22px}
.section-title{font-size:16px;color:var(--accent);margin:0 0 12px}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.faq-grid > *,.related-grid > *{background:var(--panel);padding:12px;border-radius:4px;font-size:14px;color:var(--text)}

.ad-slot{background:transparent;padding:12px;color:var(--muted);font-size:13px;border-radius:4px}
.ad-slot > *{display:block}
.ad-top{margin:18px 0}
.ad-middle{margin:18px 0}
.ad-bottom{margin-top:8px}

.site-footer{margin-top:auto;padding:18px 20px;border-top:1px solid rgba(0,0,0,0.04);font-size:13px;color:var(--muted)}
.footer-inner{max-width:var(--max-width);margin:0 auto}

/* 桌面专属差异 - 必须包含 @media (min-width: 1024px) */
@media (min-width:1024px){
  :root{font-size:16px}
  .site-inner{padding:0 28px}
  .layout{grid-template-columns:200px minmax(640px,1fr) 280px;gap:40px}
  /* 学刊式布局：站名置左、栏目置右，章节感与大留白 */
  h1{font-size:36px}
  .article-content{padding:28px 18px;font-size:16px}
  .title-row{grid-template-columns:1fr 180px}
  .bottom-wide{grid-template-columns:1fr;}
  /* FAQ 与 推荐 横跨页面底部：在桌面上两栏并排但宽度全站 */
  .faq-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr 1fr}
  /* 增加章节编号感（纯样式） */
  .article-content h2{position:relative;padding-left:44px}
  .article-content h2::before{content:counter(section);counter-increment:section;position:absolute;left:0;top:0;color:var(--muted);font-weight:700}
  .article-content{counter-reset:section}
}

/* 手机端重排 - 必须包含 @media (max-width: 767px) */
@media (max-width:767px){
  :root{font-size:15px}
  .masthead-inner{justify-content:space-between}
  .site-logo{font-size:16px}
  .site-inner{width:100%;padding:8px}
  .layout{display:block}
  .col-left{display:flex;gap:12px;align-items:center;padding:8px 0}
  .col-left .vertical-label{writing-mode:horizontal-tb;transform:none;display:none}
  .col-right{order:3;padding-top:8px}
  .col-main{order:2}
  h1{font-size:20px}
  .title-row{grid-template-columns:1fr;gap:8px}
  .meta-narrow{text-align:left}
  .article-content{padding:12px;background-image:repeating-linear-gradient(transparent, transparent 6px, var(--line) 7px),repeating-linear-gradient(transparent, transparent 18px, var(--major-line) 19px)}
  .bottom-wide{display:block}
  .faq-grid{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  .col-right .panel{margin-top:12px}
  .ad-slot{padding:10px}
}

/* 中等屏适配（768px - 1023px）保持紧凑 */
@media (min-width:768px) and (max-width:1023px){
  .layout{grid-template-columns:160px 1fr;gap:20px}
  .col-right{display:none}
  .title-row{grid-template-columns:1fr 140px}
  h1{font-size:24px}
}

/* 无重影、无深色科技风格；禁用大圆角/重阴影 */
*{box-shadow:none}