/* Monochrome-feature stylesheet for hti8xen.cn - 发现资讯导航 */
:root{
  --bg: #FBF8F5; /* 象牙白 */
  --text: #222222;
  --muted: #6b6766;
  --accent: #3b2f42; /* 深紫灰 */
  --line: #ded8d4;
  --max-width: 1280px; /* 在1120-1440之间，选1280 */
  --gutter: 28px;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

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

/* Header: 居中刊头与横线导航 */
.site-header{padding:18px 12px;border-bottom:1px solid var(--line);background:transparent}
.nav-line{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--gutter)}
.brand a{font-weight:700;color:var(--text);font-family:var(--serif);font-size:20px;text-decoration:none}
.nav-side{color:var(--muted);font-size:14px}

/* Page wrapper */
.page-wrapper{padding:28px 12px}
.page-grid{max-width:var(--max-width);margin:0 auto}

/* Title composition: 标题压左并用粗细横线构图 */
.title-row{display:flex;align-items:center;gap:18px;margin-top:18px;margin-bottom:12px}
.title-accent{width:44px;height:6px;background:var(--accent);flex:0 0 auto}
.title-rule{flex:1;height:1px;background:var(--line)}
.title{margin:0;font-family:var(--serif);font-weight:700;color:var(--text);font-size:30px;line-height:1.05;flex:0 0 auto;text-align:left}

.summary{margin:12px 0 18px;color:var(--muted);font-size:15px}

/* Content grid: desktop 8/4 split; main article and sidebar */
.content-area{display:block}
.article .article-meta .times{color:var(--muted);font-size:13px;margin-bottom:6px}

/* Body text: serif title, sans body; visual signature: first letter emphasize */
.body-text{font-family:var(--sans);color:var(--text);font-size:17px}
.body-text p{margin:0 0 1em}
.body-text p:first-of-type::first-letter{
  color:var(--accent);
  font-family:var(--serif);
  font-size:2.2em;
  line-height:1;
  margin-right:6px;
  float:left;
}

/* FAQ pattern: 顶部边线问答区 */
.faq{border-top:4px solid var(--accent);padding-top:12px;margin-top:22px}
.faq h2{margin:0 0 8px;font-family:var(--serif);font-size:18px}
.faq-body{color:var(--muted);font-size:15px}

/* Related pattern: 四列紧凑标题网格 */
.related{margin-top:18px}
.related-title{font-family:var(--serif);font-size:15px;margin:0 0 10px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.related-grid > *{font-size:14px;color:var(--text);line-height:1.3}

/* Ads: independent containers, non-floating */
.ad-banner,.ad-block{background:transparent;border:1px dashed var(--line);color:var(--muted);padding:12px;margin:18px 0;text-align:center;font-size:13px}
.ad-top{max-width:var(--max-width);margin:0 auto}
.ad-middle-side{display:none}
.ad-bottom-mobile{display:none}

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

/* Desktop layout rules - 必须包含 @media (min-width: 1024px) */
@media (min-width:1024px){
  .page-wrapper{padding:36px 20px}
  .title{font-size:44px}

  .page-grid{display:grid;grid-template-columns:1fr;}
  .content-area{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;align-items:start}

  /* 主区 8/12，侧栏 4/12 */
  .main{grid-column:span 8}
  .sidebar{grid-column:span 4}

  .main .body-text{font-size:18px}
  .main .faq{margin-left:0}

  /* related grid: 四列紧凑 */
  .related-grid{grid-template-columns:repeat(4,1fr)}

  /* show sidebar-middle ad */
  .ad-middle-side{display:block;margin-top:18px}
  .ad-block.ad-middle{display:none}
  .ad-block.ad-bottom{margin-top:20px}
}

/* Mobile layout rules - 必须包含 @media (max-width: 767px) */
@media (max-width:767px){
  :root{--gutter:16px}
  .nav-line{padding:0 12px}
  .brand a{font-size:17px}
  .title-row{gap:10px}
  .title-accent{width:28px;height:5px}
  .title{font-size:20px}
  .page-wrapper{padding:14px 10px}
  .page-grid{padding:0}

  /* single column flow */
  .content-area{display:block}
  .main{grid-column:1 / -1}
  .sidebar{grid-column:1 / -1;margin-top:18px}

  .related-grid{display:block}
  .related-grid > *{padding:8px 0;border-top:1px solid var(--line)}

  /* show mobile ad bottom */
  .ad-block.ad-middle{display:block}
  .ad-block.ad-bottom-mobile{display:block}
  .ad-bottom{display:none}

  /* Ensure no horizontal scroll at 320px */
  body{word-break:break-word;overflow-x:hidden}
  .title{word-break:break-word}
}

/* Accessibility helpers */
h1,h2,h3{color:var(--text)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}