:root{
  --bg:#f6f4ef; /* 米白 */
  --ink:#0b3a2b; /* 墨绿 */
  --muted:#6b6b66;
  --accent:#e9f0ea;
  --max-width:1280px; /* 在1120-1440区间 */
  --gap:22px;
  --radius:6px;
  --line:1.45;
  font-family: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue','Noto Sans SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);margin:0}
.toolbar{background:transparent;border-bottom:1px solid rgba(11,58,43,0.06)}
.toolbar-inner{max-width:var(--max-width);margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:12px}
.site-name{font-weight:700;color:var(--ink);text-decoration:none}
.breadcrumb{font-size:13px;color:var(--muted);margin-left:auto}
.page-wrap{padding:18px}
.container{max-width:var(--max-width);margin:16px auto}
.article{display:block}
.title-area{padding:6px 6px 12px}
.eyebrow{font-size:13px;color:var(--ink);opacity:0.9;font-weight:600;letter-spacing:0.02em}
.title{margin:6px 0 6px;font-size:28px;line-height:1.08;font-weight:800}
.meta{font-size:13px;color:var(--muted);display:flex;gap:12px;align-items:center}
.summary-band{display:block;margin-top:14px;padding:8px 12px;background:var(--accent);border-left:4px solid var(--ink);max-width:100%;width:auto}
.summary{margin:0;color:var(--ink);font-size:15px}
.layout-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:20px}
.main-column{order:1}
.side-column{order:2}
.side-block{background:transparent;border:1px solid rgba(11,58,43,0.06);padding:12px;margin-bottom:18px}
.side-title{margin:0 0 8px;font-size:15px;color:var(--ink);font-weight:700}
.kv{margin:0;font-size:13px;color:var(--muted)}
.kv dt{font-weight:700;color:var(--ink);display:inline}
.kv dd{margin:0 0 8px 0}
.content{font-size:16px;line-height:var(--line);color:var(--ink)}
.content > *:first-child{margin-top:0}
.content p{margin:0 0 14px}
.ad{margin:18px 0;padding:10px;border:1px dashed rgba(11,58,43,0.08);background:transparent}
.bottom-related{margin-top:28px}
.related-title{font-size:16px;margin:0 0 8px;font-weight:700}
.related-list{display:block}
.faq-list{display:block}
.site-footer{border-top:1px solid rgba(11,58,43,0.06);padding:18px 0;margin-top:36px}
.foot-inner{max-width:var(--max-width);margin:0 auto;padding:0 18px;color:var(--muted);font-size:13px}

/* Desktop rules: 强制 @media (min-width: 1024px) */
@media (min-width:1024px){
  .container{padding:0 18px}
  /* Grid: 12-columns concept: main 8 cols, side 4 cols */
  .layout-grid{grid-template-columns:repeat(12,1fr);gap:28px;align-items:start}
  .main-column{grid-column:1 / span 8;order:1}
  .side-column{grid-column:9 / span 4;order:2;display:flex;flex-direction:column}

  .title{font-size:36px}
  .eyebrow{font-size:13px}
  .summary-band{max-width:900px}

  /* Side blocks should have different heights visually */
  .side-faq{flex:1;min-height:220px}
  .side-info{flex:0 0 140px}

  /* FAQ two-column */
  .faq-list ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
  .faq-list li{padding:6px 0;border-bottom:1px solid rgba(11,58,43,0.04)}

  /* Related are shown as a four-column grid at bottom */
  .related-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  /* expect CMS to output each item as list element or block; provide separators style for date pattern */
  .related-list > *{padding:10px;border-top:1px solid rgba(11,58,43,0.04)}
  .related-list time{display:block;color:var(--muted);font-size:13px;margin-top:6px}
}

/* Mobile rules: 强制 @media (max-width: 767px) */
@media (max-width:767px){
  body{font-size:16px}
  .toolbar-inner{padding:10px 14px}
  .title{font-size:20px}
  .eyebrow{font-size:12px}
  .summary-band{margin-top:10px;padding:8px}
  .layout-grid{grid-template-columns:1fr}
  .main-column{order:1}
  .side-column{order:2}
  /* Side info becomes content-after blocks: stacked under content naturally */
  .side-block{margin:10px 0;padding:10px;border-left:3px solid var(--ink);background:#fff}
  /* FAQ single column */
  .faq-list ul{display:block}
  .faq-list li{padding:8px 0;border-bottom:1px dashed rgba(11,58,43,0.06)}

  /* bottom recommendations become single column */
  .related-list{display:block}
  .related-list > *{padding:12px 0;border-bottom:1px solid rgba(11,58,43,0.04)}

  /* ensure no horizontal scroll at 320px */
  .container{padding:0 12px}
  .page-wrap{padding:10px}
}

/* Accessibility and density */
.title, .side-title{line-height:1.05}
.content a{color:var(--ink);text-decoration:underline}