:root{
  --bg:#f6f8f8;
  --ink:#0b2430;
  --muted:#6b7376;
  --accent:#3aa0c6; /* 湖蓝 */
  --accent-deep:#2b899f;
  --teal-gray:#dfeff0; /* 青灰 */
  --max-width:1360px;
  --center-column:780px;
  --gutter:24px;
  --meta-width:200px;
  --related-width:260px;
  --radius:4px;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);line-height:1.5}
a{color:inherit;text-decoration:none}
.topbar{background:#08292f;color:#fff;padding:10px 16px}
.toolbar{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.brand .home{color:#dff7ff;font-weight:700}
.brand .breadcrumb{color:rgba(255,255,255,0.85);font-size:13px}
.brand .sep{opacity:0.25}

.page{padding:18px 12px}
.container{max-width:var(--max-width);margin:0 auto;display:grid;gap:20px;align-items:start}

/* Desktop layout: 三轨阅读结构 */
@media (min-width:1024px){
  .container{grid-template-columns:var(--meta-width) var(--center-column) var(--related-width);padding:28px 20px}
  .meta{order:1}
  .content{order:2}
  .related{order:3}

  /* center article surface */
  .content{background:#fff;padding:20px;border-top:6px solid transparent}
  .content .article-head{margin-bottom:12px}

  /* 标题与摘要左右分置 */
  .title-row{display:flex;align-items:flex-start;gap:12px}
  .title{font-family:var(--font-serif);font-size:28px;margin:0;color:var(--ink);line-height:1.15;flex:1}
  .summary-band{width:260px;background:linear-gradient(180deg,var(--teal-gray),#ffffff);border-left:4px solid var(--accent);padding:10px 12px;font-size:14px;color:var(--ink);}

  .article-body{font-size:16px;padding-top:6px;color:var(--ink)}
  .body-inner p{margin:0 0 12px}

  /* meta blocks on left
     square blocks, tight density */
  .meta{padding:6px}
  .info-block{background:#fff;padding:10px;border:1px solid #e6efef;margin-bottom:10px}
  .info-label{font-size:12px;color:var(--muted);margin-bottom:6px}
  .keywords{font-size:13px;color:var(--ink)}

  /* related index style */
  .related{padding:8px}
  .related .related-list{background:#fff;border:1px solid #e6efef;padding:10px;display:block}
  .related-title{font-size:14px;margin:0 0 8px;color:var(--accent-deep)}
  .related-list{font-size:14px;line-height:1.6}

  /* FAQ with top border in theme color */
  .faq{margin-top:18px;padding:12px 0;border-top:4px solid var(--accent)}
  .faq-title{font-size:16px;margin:0 0 8px;font-family:var(--font-serif)}
  .faq-inner{background:#fff;padding:10px;border:1px solid #e6efef}

  /* Ads separate and static */
  .ad{max-width:var(--center-column);margin:12px auto;padding:8px;background:transparent;color:var(--muted);border:1px dashed #d7eaea}

  /* footer */
  .site-footer{padding:18px 0;text-align:center;color:var(--muted);font-size:13px}
}

/* Mobile layout: single column, side info moves below正文 */
@media (max-width:767px){
  .container{display:block;padding:12px}
  .meta{display:none} /* meta moved below article as blocks */
  .related{display:none} /* use mobile-only related block below article */

  .content{background:#fff;padding:14px;border-top:4px solid transparent}
  .title-row{display:block}
  .title{font-family:var(--font-serif);font-size:20px;margin:0 0 8px}
  .summary-band{display:block;width:auto;background:var(--teal-gray);border-left:4px solid var(--accent);padding:8px 10px;margin-bottom:8px;font-size:13px}

  .article-body{font-size:15px}
  .body-inner p{margin:0 0 12px}

  .related-mobile-only{background:#fff;border:1px solid #e6efef;padding:10px;margin-top:12px}
  .related-mobile-only .related-title{margin:0 0 8px;color:var(--accent-deep)}

  .faq{margin-top:12px;padding-top:10px;border-top:4px solid var(--accent)}
  .faq-title{font-size:15px;margin:0 0 8px;font-family:var(--font-serif)}
  .faq-inner{padding:6px}

  .ad{width:100%;margin:12px 0;padding:8px;border:1px dashed #d7eaea}

  .site-footer{padding:14px 0;text-align:center;color:var(--muted);font-size:13px}
}

/* Mid-range devices between mobile and desktop: ensure no horizontal scroll at 320px */
@media (min-width:768px) and (max-width:1023px){
  .container{display:block;padding:16px}
  .meta{display:none}
  .related{display:none}
  .content{background:#fff;padding:16px}
  .title{font-family:var(--font-serif);font-size:22px}
  .summary-band{display:block;margin-top:8px}
  .ad{width:100%;margin:12px 0;padding:8px;border:1px dashed #d7eaea}
}

/* Accessibility and small tweaks */
.small{font-size:13px;color:var(--muted)}
.info-block, .related .related-list, .faq-inner{border-radius:0}