:root{
  --bg:#f6fbfb; /* 青灰底 */
  --accent:#4aa1c6; /* 湖蓝 */
  --muted:#6b7880;
  --text:#111316;
  --paper:#ffffff;
  --line:#e6eef0;
  --max-container:1320px;

  --title-font: Georgia, 'Times New Roman', serif;
  --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --density-xs:8px;
  --density-s:12px;
  --density-m:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body-font);
  -webkit-font-smoothing:antialiased;
  line-height:1.58;
  font-size:16px;
}

/* Header toolbar - 极简细导航 */
.site-toolbar{
  background:linear-gradient(0deg, rgba(250,253,254,0.6), rgba(250,253,254,0.6));
  border-bottom:1px solid var(--line);
}
.toolbar-inner{
  max-width:1200px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px;
}
.brand{color:var(--accent); text-decoration:none; font-weight:700; letter-spacing:0.2px}
.crumb{color:var(--muted); font-size:13px; margin-left:auto}

.page-wrap{padding:20px 10px 40px}
.container{margin:18px auto; padding:18px}

/* page-grid sets the reading structure. On desktop a centered article and a narrow vertical meta column at edge */
.page-grid{
  display:block;
  margin:0 auto;
}

.article{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:20px; box-shadow:none}
.article-header{margin-bottom:8px}
.title{font-family:var(--title-font); font-size:28px; color:var(--text); margin:0 0 10px 0; line-height:1.15}
.summary{color:var(--muted); margin:0 0 14px 0; font-size:15px}

/* meta-inline for mobile between title and content (compact) */
.meta-inline{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:13px}
.meta-inline .published{font-variant-numeric:tabular-nums}
.meta-inline .now{opacity:0.95}
.meta-inline .kw{display:inline-block}

.content{color:var(--text); font-size:16px}
.content :where(p, h2, h3, ul, ol){max-width:100%}
.content h2{font-size:20px; margin:18px 0 8px}
.content p{margin:0 0 12px}

/* FAQ: expects editors to provide details/summary; style them to be minimal and not carded */
.faq-section .section-title,
.related-section .section-title{font-size:15px; margin:18px 0 8px; color:var(--muted)}
.faq details{border-top:1px solid var(--line); padding:10px 0}
.faq summary{cursor:pointer; list-style:none; outline:none; font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{color:var(--accent)}
.faq details p{margin:8px 0 0; color:var(--text)}

/* Related: bottom list, desktop will show multi-column */
.related{display:grid; gap:12px}
.related a{display:block; color:var(--text); text-decoration:none; padding:8px 6px; border:1px solid transparent}
.related .item-title{font-weight:600}
.related .item-summary{color:var(--muted); font-size:14px}

/* Ads are non-floating blocks */
.ad{background:transparent; color:var(--muted); text-align:center; padding:12px 0}
.ad-top{margin:10px auto}
.ad-middle{margin:18px 0}
.ad-bottom{margin-top:20px}

.site-footer{margin-top:26px; padding:18px 10px; color:var(--muted); border-top:1px solid var(--line); text-align:center}

/* Desktop layout (>=1024px) - ensure distinct desktop reading experience */
@media (min-width:1024px){
  body{font-size:16px}
  .container{padding:28px 20px; max-width:var(--max-container); margin:22px auto}
  .page-grid{
    display:grid;
    grid-template-columns: 1fr 240px; /* main + narrow meta column */
    gap:28px;
    align-items:start;
  }
  /* ensure main article column stays at readable measure ~860px centered within the left column */
  .article{max-width:860px; margin:0 auto; border-radius:4px; padding:28px}
  /* desktop meta column acts as vertical meta aligned along edge (visual_signature) */
  .meta-column{display:block}
  .desktop-meta .meta-box{position:sticky; top:30px; border-left:2px solid var(--line); padding-left:16px}
  .desktop-meta .meta-item{display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; margin-bottom:10px}
  .desktop-meta .meta-item strong{color:var(--muted); font-weight:600; font-size:12px}
  .desktop-meta .meta-note{font-size:12px; color:var(--muted)}

  /* Related at bottom: three columns per desktop_contract */
  .related{grid-template-columns:repeat(3,1fr); display:grid}
  .related a{border:1px solid var(--line); padding:10px; border-radius:3px}
  .related .item-summary{display:block; margin-top:6px}

  /* title larger on desktop and compact spacing per density contract '紧凑' */
  .title{font-size:34px}
  .summary{font-size:15px}
  .meta-inline.mobile-meta{display:none}
}

/* Enforce container width between 1120px—1440px on larger desktops (when available) */
@media (min-width:1120px){
  .container{width:clamp(1120px, 88vw, 1440px)}
}

/* Mobile rules (<=767px): independent mobile reading layout */
@media (max-width:767px){
  .toolbar-inner{padding:10px 12px}
  .page-grid{display:block}
  .article{border-radius:0; padding:14px}
  .title{font-size:20px}
  .summary{font-size:14px}
  .meta-inline.mobile-meta{display:flex; margin-bottom:10px}
  .desktop-meta{display:none}

  /* content full width minus safe padding */
  .container{padding:0 12px}

  /* related becomes single-column per mobile_contract */
  .related{grid-template-columns:1fr; display:grid}
  .related a{border:1px solid var(--line); padding:10px}

  /* ensure 320px no horizontal scroll */
  .article, .container, .toolbar-inner{min-width:0; overflow-wrap:break-word}
}

/* Accessibility focus */
a:focus{outline:2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset:2px}