:root{
  --green-ink: #0b3b2e; /* 墨绿 */
  --ivory: #f7f5ef;     /* 米白 */
  --muted: #6b6b66;
  --line: #e6e3dd;
  --text: #222;
  --max-width: 1280px;
  --sidebar-width: 300px;
  --meta-width: 76px;
  --gap: 28px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Roboto, "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* Global reset and body */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--ivory);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
}

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

/* Top bar: left-aligned compact brand */
.topbar{
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:12px 20px;
}
.brand{font-weight:700;color:var(--green-ink);font-size:16px}
.brand-link{display:inline-block;padding:6px 8px}

.site-wrap{
  padding:20px 16px 40px;
}

.ad-container{padding:10px 0;text-align:center;color:var(--muted);font-size:13px}
.ad-top,.ad-middle,.ad-bottom{background:transparent}

/* Layout: default mobile-first single column */
.layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:var(--gap);
  align-items:start;
  max-width:100%;
  margin:0 auto;
}

.meta-vertical{display:none} /* mobile hides side meta and moves info into header area via content */

.main-article{background:transparent}
.article-head{margin-bottom:12px}
.title{
  margin:6px 0 8px;
  font-weight:800;
  font-size:20px;
  line-height:1.12;
  text-align:center; /* 标题居中 */
  color:var(--green-ink);
}
.lead-meta{max-width:100%;padding:6px 6px 14px}
.summary-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.summary{margin:0;color:#333;font-size:15px; text-align:left}

.article-body{padding:6px 0}
.content{font-size:16px;line-height:1.8;color:#222}

.section-title{font-size:15px;color:var(--green-ink);margin:18px 0 8px}
.faq-content,.related-list{color:#2b2b2b}

.sidebar{background:transparent}
.related-list a{display:block;padding:10px 6px;border-top:1px solid var(--line);color:var(--text);font-size:14px}
.related-list a time{display:block;font-size:12px;color:var(--muted);margin-top:6px}

.site-footer{border-top:1px solid var(--line);padding:18px 16px;text-align:center;font-size:13px;color:var(--muted);margin-top:20px}

/* Mobile touch target rules */
.topbar .brand-link, .related-list a{min-height:44px;display:flex;align-items:center}

/* Desktop rules - explicit per contract */
@media (min-width:1024px){
  .site-wrap{padding:28px 20px}
  .layout{
    /* 三栏视觉：窄列(元信息) + 宽主栏 + 窄边栏（满足宽主栏和窄侧栏的契约） */
    grid-template-columns: var(--meta-width) 1fr var(--sidebar-width);
    gap:var(--gap);
    align-items:start;
    max-width: clamp(1120px, 88vw, 1440px);
    margin:0 auto;
  }

  /* Ensure container width 在 1120px—1440px 区间 */
  .layout{width:100%;max-width:var(--max-width)}

  .meta-vertical{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:14px;padding-top:6px;padding-right:12px;border-right:1px solid var(--line);
    color:var(--muted);font-size:13px;min-height:120px
  }
  .meta-item{display:flex;flex-direction:column;align-items:center}
  .meta-label{font-size:11px;color:var(--muted)}
  .meta-value{color:var(--green-ink);font-weight:600;font-size:13px}

  .main-article{padding:0 18px}
  .title{font-size:28px;line-height:1.06;margin-top:6px}
  .lead-meta{padding:0 4px 12px}
  .summary{font-size:15px;max-width:66ch}

  .content{font-size:17px;line-height:1.9}

  .sidebar{padding-left:6px}
  .related .section-title{margin-top:4px}
  .related-list a{display:flex;justify-content:space-between;align-items:center;padding:10px 6px;border-top:1px solid var(--line)}
  .related-list a .title{font-size:14px}
  .related-list a time{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:12px}

  /* Visual density: 较高信息密度，使用细灰线和方角 */
  .main-article, .sidebar{border-radius:0}
}

/* Mobile layout specifics */
@media (max-width:767px){
  .topbar{padding:10px}
  .brand{font-size:15px}
  .title{font-size:18px}
  .lead-meta{padding:0}
  .content{font-size:15px}

  /* Stack order: article first, sidebar after content (side-bar移动到正文后) */
  .layout{grid-template-columns:1fr;}
  .meta-vertical{display:none}
  .sidebar{order:3;margin-top:8px}

  .related-list a{padding:12px 8px;border-top:1px solid var(--line)}
}

/* Accessibility and readable focus */
a:focus{outline:3px solid rgba(11,59,46,0.12);outline-offset:2px}

/* Prevent horizontal overflow at smallest widths */
html,body{overflow-x:hidden}