/* Monochrome-feature stylesheet for uyuey31.cn - "轻阅资讯阅览" */
:root{
  --bg:#ffffff;
  --text:#0b0b0b;
  --muted:#6b6b6b;
  --rule:#e6e6e6;
  --accent:#b30010; /* 朱红强调色 */
  --max-width:1280px; /* between 1120 and 1440 */
  --page-padding:18px;
  --serif: Georgia, 'Times New Roman', serif;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--ui);margin:0}
.page-wrap{min-height:100%;display:flex;flex-direction:column}
.site-header{border-bottom:1px solid var(--rule);padding:12px var(--page-padding);font-size:14px}
.header-line{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.site-logo{font-weight:700;text-decoration:none;color:var(--text);letter-spacing:0.02em}
.site-nav{color:var(--muted)}

.container{width:100%;max-width:var(--max-width);margin:20px auto;padding:0 var(--page-padding);}
.feature-article{display:block}
.article-header{padding:8px 0 18px;border-bottom:1px solid var(--rule)}

/* Title composition: 标题居中摘要左对齐 */
.title-wrap{text-align:center;padding:6px 12px}
.title-wrap h1{font-family:var(--serif);font-size:36px;line-height:1.05;margin:6px 0;color:var(--text);font-weight:700}

.meta-line{display:flex;gap:12px;justify-content:center;color:var(--muted);font-size:13px;margin-top:6px}
.current-time{opacity:0.95}

/* Summary uses narrow colored band as visual signature */
.summary{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;color:var(--muted);font-size:15px;line-height:1.6}
.sig-band{width:6px;height:18px;background:var(--accent);display:inline-block;margin-right:8px;flex:0 0 6px}

/* content grid: will change between desktop and mobile */
.content-grid{display:block;margin-top:20px}
.article-body{color:var(--text);font-size:16px;line-height:1.85;hyphens:auto}
.article-body p{margin:0 0 1em}
.article-body h2, .article-body h3{font-family:var(--serif);color:var(--text);margin:1em 0 0.6em}

/* Side rail reserved for related and faq, without using rounded cards */
.side-rail{margin-top:28px}
.related-title, .faq h2{font-size:15px;margin:0 0 10px;color:var(--text);font-weight:600}
.related-list{display:block;column-gap:18px}
.faq-list details{border-bottom:1px solid var(--rule);padding:10px 0}
.faq-list details summary{cursor:pointer;list-style:none;outline:none;font-weight:600}
.faq-list details[open] summary{color:var(--accent)}

.ad-slot{border:1px dashed var(--rule);padding:10px;margin:12px 0;color:var(--muted);font-size:13px}
.ad-top{margin-bottom:6px}
.ad-middle{margin-top:18px}
.ad-bottom{margin-top:18px}

.site-footer{border-top:1px solid var(--rule);padding:14px var(--page-padding);margin-top:auto}
.footer-inner{max-width:var(--max-width);margin:0 auto;color:var(--muted);font-size:13px}

/* FORBIDDEN: no rounded corners, no shadows */

/* Desktop rules: distinct layout, 8/4 column, fine grid lines in header area */
@media (min-width:1024px){
  .title-wrap h1{font-size:56px}
  .container{padding:0}
  .content-grid{display:grid;grid-template-columns:2fr 1fr;gap:36px;align-items:start}

  /* main content spans approx 8/12, side 4/12 -> 2fr/1fr ratio */
  .article-body{columns:1;max-width:none;font-size:18px;line-height:1.95}

  /* thin editorial grid overlay in header area (non-obstructive) */
  .article-header{position:relative}
  .article-header::before{content:"";position:absolute;inset:0 0 0 0;pointer-events:none;background-image:repeating-linear-gradient(to right, rgba(0,0,0,0.03) 0 1px, transparent 1px 48px);opacity:0.04}

  /* related as two-column summary list */
  .related-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .related-list > *{padding:6px 0;border-top:1px solid var(--rule)}

  .side-rail{border-left:1px solid var(--rule);padding-left:22px}

  /* keep summary left-aligned while title centered */
  .summary{justify-content:flex-start}

  /* ensure no horizontal scroll */
  html,body{overflow-x:hidden}
}

/* Mobile rules: single column, title scaled down, preserve black/white hierarchy */
@media (max-width:767px){
  :root{--page-padding:14px}
  .title-wrap h1{font-size:20px;text-align:center}
  .meta-line{justify-content:flex-start;padding-top:6px}
  .site-header{padding:10px var(--page-padding)}
  .container{padding:0 var(--page-padding)}

  .content-grid{display:block}
  .side-rail{margin-top:18px;padding:0}

  .related-list{display:grid;grid-template-columns:1fr;gap:6px}
  .related-title, .faq h2{font-size:14px}

  .article-body{font-size:15px;line-height:1.8}

  /* FAQ pattern: details list should compress naturally */
  .faq-list details{padding:8px 0}

  /* ensure 320px fits without horizontal scroll */
  .site-logo{font-size:15px}
  .summary{font-size:14px}
}