:root{
  --bg:#f6f8f9; /* 青灰底 */
  --panel:#ffffff;
  --muted:#6b7b80;
  --accent:#3aa0d0; /* 湖蓝 */
  --border:#d6dde0;
  --max-width-clamp: clamp(1120px, 90vw, 1440px);
  --container-padding: 24px;
  --type-serif: Georgia, "Times New Roman", serif;
  --type-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--type-sans);
  background:var(--bg);
  color:#21303a;
  line-height:1.65; /* 舒展 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent); text-decoration:none}
a:focus{outline:2px solid rgba(58,160,208,.18)}

.site-header{
  background:transparent;
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--max-width-clamp);
  margin:0 auto; padding:12px var(--container-padding); display:flex; align-items:center; gap:16px;
}
.brand{font-weight:700; color:#0f2a2f; font-family:var(--type-serif);}
.top-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:18px; align-items:center}
.top-nav li{font-size:14px; color:var(--muted)}
.top-nav a{color:var(--accent)}

.page-wrap{max-width:var(--max-width-clamp); margin:20px auto; padding:0 var(--container-padding)}

.layout-grid{
  display:grid;
  grid-template-columns: 1fr; /* mobile default single column */
  gap:20px;
  align-items:start;
}

/* Article header */
.article-head{grid-column:1; background:transparent}
.title-meta{display:flex; gap:20px; align-items:flex-start}
.title-meta h1{font-family:var(--type-serif); font-size:28px; margin:0; color:#0b2a30; line-height:1.12}
.meta-col{font-size:13px; color:var(--muted); min-width:160px}
.meta-item{margin-bottom:6px}
.summary{margin-top:12px; padding:12px; border:1px solid var(--border); background:#fff; border-radius:2px}

/* Side rail */
.side-rail{border:1px solid var(--border); background:var(--panel); padding:12px; display:flex; flex-direction:column; gap:14px}
.side-box h3,h4{margin:0 0 8px 0; font-family:var(--type-serif); font-size:15px}
.side-box p{margin:0; color:var(--muted); font-size:14px}
.related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; font-size:13px}
.related-grid a{display:block; color:inherit}

/* Content area */
.content-area{background:transparent}
.article-body{background:var(--panel); border:1px solid var(--border); padding:18px; border-radius:2px}
.content-text{color:#122428; font-size:16px}

/* Visual signature: 首段首字母强调 */
.article-body p:first-of-type::first-letter{
  float:left; font-family:var(--type-serif); font-size:36px; line-height:1; color:var(--accent); padding-right:6px; padding-top:4px;
}

.ad-block{padding:12px; border:1px dashed var(--border); background:transparent; text-align:center; color:var(--muted); font-size:13px}

.faq h2{font-family:var(--type-serif); font-size:18px; margin:18px 0 12px}
.faq-list details{border-top:1px solid var(--border); padding:10px 0}
.faq-list summary{cursor:pointer; font-weight:600; list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list p{margin:8px 0 0 0}

.site-footer{border-top:1px solid var(--border); margin-top:28px; background:transparent}
.foot-inner{max-width:var(--max-width-clamp); margin:0 auto; padding:16px var(--container-padding); color:var(--muted)}

/* Desktop rules: >=1024px */
@media (min-width:1024px){
  .title-meta h1{font-size:40px}
  .header-inner{padding:18px var(--container-padding)}

  /* Main 12-column expressive grid: article area 8 cols, side 4 cols. We implement via CSS grid areas */
  .layout-grid{
    display:grid;
    grid-template-columns: 8fr 4fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "headline headline"
      "summary summary"
      "content aside";
    gap:20px 28px;
  }

  .article-head{grid-area:headline}
  .summary{grid-area:summary}
  .content-area{grid-area:content}
  .side-rail{grid-area:aside}

  /* Ensure the container width conforms to contract (1120px—1440px) */
  .page-wrap{max-width:var(--max-width-clamp)}

  /* Title composition: large title with narrow meta column */
  .title-meta{display:grid; grid-template-columns:1fr 220px; align-items:start}
  .meta-col{justify-self:end; text-align:right}

  /* Related pattern: 四列紧凑标题网格 */
  .related-grid{grid-template-columns:repeat(2,1fr);}
  .related-grid a{font-size:13px; padding:6px 4px; display:block;border-bottom:1px solid transparent}
}

/* Mobile rules: <=767px */
@media (max-width:767px){
  body{font-size:15px}
  .header-inner{padding:10px}
  .title-meta h1{font-size:22px}
  .title-meta{flex-direction:column}
  .meta-col{order:2; text-align:left; font-size:13px}

  /* Single column layout */
  .layout-grid{grid-template-columns:1fr; gap:12px}
  .article-head{grid-column:1}
  .summary{grid-column:1}
  .content-area{grid-column:1}
  .side-rail{grid-column:1}

  /* Mobile: 侧栏移到正文、FAQ之后 -> use ordering */
  .article-head{order:0}
  .summary{order:1}
  .content-area{order:2}
  .faq{order:3}
  .side-rail{order:4}

  /* 相关推荐改为横向分隔列表（紧凑但不造成横向滚动） */
  .related-grid{display:flex; gap:10px; flex-wrap:wrap}
  .related-grid > *{flex:1 1 calc(50% - 10px); border-left: none; padding:6px 0}
  .related-grid > *:not(:nth-child(2n)){border-right:1px solid var(--border)}

  /* FAQ 使用无卡片 details 折叠列表风格 */
  .faq-list details{padding:10px 0}
}

/* Accessibility & density tweaks */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}