:root{
  --bg:#f7f5ef; /* 米白 */
  --ink:#264e36; /* 墨绿 */
  --muted:#6b6b6b;
  --surface:#ffffff;
  --border:rgba(38,78,54,0.12);
  --radius:2px;
  --gap:16px;
  --font-stack:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
}

/* Base reset and typography */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-stack);
  background:var(--bg);
  color:#111;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  font-size:15px; /* 紧凑 */
}
a{color:var(--ink); text-decoration:none}

/* Header: 居中刊头与横线导航 */
.top-header{
  background:transparent;
  padding:12px 16px;
}
.nav-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}
.brand a{font-weight:700;color:var(--ink);font-size:18px}
.nav-rule{border:none;border-top:1px solid var(--border);margin:10px 0}

/* Ad containers independent and non-floating */
.ad-container{max-width:1200px;margin:12px auto;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--muted)}

/* Page wrap and layout placeholders */
.page-wrap{display:grid;gap:24px;width:100%;margin:0 auto;padding:8px}

/* Vertical masthead (desktop) */
.masthead-vert{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 10px;
  color:var(--ink);
}
.mast-brand{font-weight:700;margin-bottom:8px}
.mast-nav{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:14px}
.mast-nav div{padding:4px 2px}

/* Article area and composition */
.article-area{display:grid;gap:20px;width:100%}
.article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.title{
  margin:0 0 8px 0;
  color:var(--ink);
  font-size:22px;
  font-weight:700;
  text-align:left; /* 标题压左 */
  position:relative;
  padding-left:2px;
}
/* 标题构图：粗细横线 */
.title::before{content:"";position:absolute;left:0;bottom:-10px;width:42px;height:3px;background:var(--ink);opacity:0.9}
.title::after{content:"";position:absolute;left:46px;bottom:-8px;width:80px;height:1px;background:var(--border)}

.meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;margin-bottom:8px}
.summary{margin:6px 0 12px 0;color:#222;font-weight:500}
.article-content{color:#111}

/* Visual signature: 正文首段首字强调（轻量） */
.article-content p:first-of-type::first-letter{color:var(--ink);font-weight:700;font-size:1.18em;padding-right:4px}

.edge-note{padding:12px}
.note-surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px;color:var(--muted);font-size:14px}

.section-title{font-size:16px;margin:14px 0 8px 0;color:var(--ink);font-weight:700}
.faq-section,.related-section{max-width:1200px;margin:0 auto;padding:0 8px}

.faqs{display:block}
.related-grid{display:block}

.site-footer{max-width:1200px;margin:20px auto;padding:12px;color:var(--muted);font-size:13px}

/* Desktop layout: must use @media (min-width: 1024px) */
@media (min-width:1024px){
  /* Ensure content container width between 1120px and 1440px */
  .page-wrap{grid-template-columns:220px 1fr;max-width:1200px;min-width:1120px;padding:18px}
  .masthead-vert{display:block}

  /* article-area is the right column; inside it form 9/3 grid */
  .article-area{display:grid;grid-template-columns:9fr 3fr;gap:20px}

  /* Title跨主区（跨越文章主栏与边注区域），更显视觉冲击 */
  .title{grid-column:1 / 3}
  .article{grid-column:1 / 2;padding:18px}
  .edge-note{grid-column:2 / 3}

  /* FAQ two-column */
  .faqs{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  /* Related: 底部三列短卡但不用阴影 */
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .related-grid > *{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px;color:var(--muted);font-size:14px}
}

/* Mobile layout: must use @media (max-width: 767px) */
@media (max-width:767px){
  body{font-size:15px}
  .top-header{padding:8px}
  /* Masthead vertical collapses into header area: hide left masthead */
  .masthead-vert{display:none}

  /* Page becomes single column flow */
  .page-wrap{display:block;padding:0 12px}
  .article-area{display:block}
  .article{border-radius:var(--radius);padding:12px}
  .edge-note{margin:12px 0}

  /* Title composition becomes compact and still left-aligned */
  .title{font-size:18px}
  .title::before{width:28px;height:2px;bottom:-8px}
  .title::after{left:34px;width:48px}

  /* FAQ single column */
  .faqs{display:block}
  .faqs > *{margin-bottom:10px}

  /* Related become single column list */
  .related-grid{display:grid;grid-template-columns:1fr;gap:10px}
  .related-grid > *{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px}

  /* Ensure no horizontal scroll at 320px */
  .nav-line,.ad-container,.faq-section,.related-section,.site-footer{padding-left:12px;padding-right:12px}
}

/* Accessibility & small refinements */
.article-content img{max-width:100%;height:auto}
.title, .section-title{word-break:break-word}