/* Palette and variables */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#b30000; /* 朱红强调 */
  --line:#e6e6e6;
  --max-width:1280px; /* 在1120-1440之间，取中间值 */
  --gap:20px;
  --font-stack: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font-stack);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

/* Header */
.site-header{border-bottom:1px solid var(--line);padding:12px 16px;background:transparent}
.header-row{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto}
.header-side{flex:1}
.header-left{display:flex;justify-content:flex-start}
.header-right{display:flex;justify-content:flex-end}
.header-center{flex:0 0 auto;text-align:center}
.site-name{font-weight:700;font-size:18px;color:var(--text);display:inline-block}
.home-link{font-size:13px;color:var(--muted)}
.nav-text{font-size:13px;color:var(--muted)}

.index-nav{max-width:var(--max-width);margin:8px auto 0;padding:6px 12px}
.index-nav ul{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.index-nav li{font-size:13px;color:var(--muted);padding:4px 6px;border:1px solid transparent}

/* Ads */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:8px;border:1px dashed var(--line);color:var(--muted);font-size:13px}
.ad-top{margin-top:18px}
.ad-bottom{margin-bottom:28px}

/* Page grid */
.page-wrap{padding:18px 16px}
.layout-grid{display:block;max-width:var(--max-width);margin:0 auto}

/* Desktop layout (min-width:1024px) - distinct structure */
@media (min-width:1024px){
  .layout-grid{display:grid;grid-template-columns:10fr 2fr;gap:32px;align-items:start}
  .content{padding:0 0 40px 0}
  .side-note{position:static;border-left:1px solid var(--line);padding-left:24px}
}

/* Mobile layout (max-width:767px) - separate reflow */
@media (max-width:767px){
  :root{--gap:12px}
  .page-wrap{padding:12px}
  .layout-grid{display:block}
  .side-note{order:2;padding-top:10px;border-top:1px solid var(--line);margin-top:12px}
  .index-nav ul{justify-content:flex-start;gap:10px}
}

/* Middle widths (768px - 1023px) keep single column but wider spacing */
@media (min-width:768px) and (max-width:1023px){
  .layout-grid{display:block}
  .side-note{border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
}

/* Article styles */
.content{background:transparent}
.article-meta{padding:0 0 12px 0;border-bottom:1px solid var(--line);margin-bottom:16px}
.eyebrow{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:0.02em;margin-bottom:6px}
h1{font-size:28px;line-height:1.2;margin:0;color:var(--text);font-weight:700}
.meta-row{margin-top:8px;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.summary{margin-top:12px;padding:10px;background:rgba(179,0,0,0.03);border:1px solid var(--line);font-size:15px;color:var(--muted)}

.article-body{margin-top:18px;font-size:16px;line-height:1.65;color:var(--text)}
.article-body p{margin:0 0 12px}

/* Visual signature: first paragraph first-letter emphasis (轻量首字强调) */
.article-body p:first-of-type::first-letter{color:var(--accent);font-size:1.2em;font-weight:700;padding-right:4px}

/* Side note */
.side-note{font-size:14px;color:var(--muted)}
.note-block{border:1px solid var(--line);padding:12px;background:transparent}
.note-title{font-size:13px;margin:0 0 8px 0;color:var(--text)}
.note-line{margin:6px 0;font-size:13px}

/* FAQ - numbered pattern */
.faq{margin-top:22px}
.section-title{font-size:15px;color:var(--text);margin:0 0 10px 0}
.faq-list{counter-reset:faq}
.faq-list > *{display:block;margin:8px 0;padding:10px;border:1px solid var(--line);background:transparent}
.faq-list > *::before{counter-increment:faq;content:counter(faq)".";font-weight:700;color:var(--accent);margin-right:8px}

/* Related pattern - date separated list */
.related-list{margin:0;padding:0}
.related-list > *{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.related-list > *:first-child{border-top:none}
.related-list .related-title{color:var(--text)}
.related-list .related-date{color:var(--muted);font-size:13px}

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

/* Accessibility and density */
a:focus{outline:2px solid rgba(179,0,0,0.2);outline-offset:2px}

/* Ensure no horizontal overflow on small widths */
body{overflow-x:hidden}