/* Palette and core variables */
:root{
  --bg:#ffffff;
  --surface:#f6f6f6;
  --text:#222322; /* 石墨灰 */
  --muted:#6b6b6b;
  --accent:#caa400; /* 芥末黄 */
  --border:rgba(34,35,34,0.08);
  --radius:2px;
  --max-desktop:1280px;
  --font-stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-stack);margin:0;padding:0;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.container{margin:0 auto;padding:20px;box-sizing:border-box}
.masthead{border-bottom:1px solid var(--border);background:linear-gradient(0deg,transparent,transparent)}
.masthead-top{display:flex;justify-content:space-between;align-items:center;padding:6px 16px;font-size:13px;color:var(--muted)}
.masthead-main{display:flex;justify-content:center;padding:8px 16px}
.site-nav{display:flex;align-items:center;width:100%;max-width:var(--max-desktop)}
.site-nav .nav-left,.site-nav .nav-right{flex:1;color:var(--muted);font-size:14px}
.brand{flex:0 0 auto;text-align:center}
.brand-link{font-weight:700;font-size:18px;letter-spacing:0.2px}
.nav-link{color:var(--muted)}

.page{padding:18px 0}
/* Grid base */
.layout-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.article{background:transparent;border-radius:var(--radius)}
.article-header{padding:6px 0 12px}
.title{font-size:28px;line-height:1.14;margin:6px 0 12px;text-align:center}
.lead-row{display:flex;align-items:start;gap:20px}
.summary{flex:1;margin:0;color:var(--muted);text-align:left}
.edge-note{flex:0 0 220px;color:var(--muted);font-size:13px;padding:6px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.meta{margin-top:10px;font-size:13px;color:var(--muted)}
.article-body{margin-top:18px}
.article-content{font-size:16px;line-height:1.8;color:var(--text)}
.article-content p{margin:0 0 1em}
.article-content p:first-of-type::first-letter{color:var(--accent);font-weight:600;font-size:1.1em}

.faq{margin-top:26px;padding:14px;border-top:4px solid var(--accent);background:transparent;border-radius:var(--radius)}
.faq h2{margin:0 0 8px;font-size:18px}
.faq-body{color:var(--muted)}

.related{margin-top:22px}
.related h2{font-size:18px;margin:0 0 10px}
.related-grid{display:grid;grid-template-columns:1fr;gap:10px}
.related-grid > *{padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.related-grid a{display:block;color:var(--text);font-weight:600}
.related-grid p{margin:6px 0 0;color:var(--muted);font-size:14px}

.side-column{display:none}
.side-block{padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:12px}
.side-block h3{margin:0 0 6px}
.side-summary{margin:0;color:var(--muted)}
.site-footer{padding:18px 20px;color:var(--muted);font-size:13px;border-top:1px solid var(--border)}
.ad-slot{padding:12px;margin:18px auto;border-radius:var(--radius);border:1px solid var(--border);background:transparent}
.ad-top{max-width:var(--max-desktop);margin:8px auto}
.ad-middle{max-width:var(--max-desktop)}
.ad-bottom{max-width:var(--max-desktop)}

/* Desktop rules */
@media (min-width:1024px){
  .container{padding:28px}
  .title{font-size:36px}
  .article-content{font-size:17px;line-height:1.9}
}

/* Enforce container width in wider viewports per contract */
@media (min-width:1120px){
  .container{width:clamp(1120px,80vw,var(--max-desktop));max-width:var(--max-desktop)}
  .layout-grid{grid-template-columns:repeat(12,1fr);gap:28px}
  .article{grid-column:span 10}
  .side-column{grid-column:11 / span 2;display:block}
  .lead-row{align-items:flex-start}
  .edge-note{order:2}
  .summary{order:1}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}

/* Mobile rules */
@media (max-width:767px){
  .container{padding:14px}
  .title{font-size:20px;margin-bottom:8px}
  .lead-row{flex-direction:column}
  .edge-note{order:2;flex:0 0 auto;width:100%}
  .summary{order:1}
  .article-content{font-size:15px;line-height:1.7}
  .related-grid{grid-template-columns:1fr}
  .side-column{display:none}
  .masthead-top{padding:8px 12px;font-size:12px}
  .masthead-main{padding:6px 12px}
  .ad-slot{margin:12px 0}
  /* Ensure no horizontal scroll at 320px */
  body{min-width:0}
}

/* Accessibility and density */
h1,h2,h3,h4{line-height:1.2}
p{word-wrap:break-word}
/* Subtle focus for links */
a:focus{outline:2px solid color-mix(in srgb, var(--accent) 25%, transparent);outline-offset:2px}