/* ============================================================
   NICODE — Articles ("观点 / Perspectives")
   Loads AFTER styles.css; reuses its :root tokens and shell.
   ============================================================ */

.article-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.article-header .nav-cta{ border:1px solid var(--soft-black); padding:10px 22px; font-size:13px; letter-spacing:.05em; white-space:nowrap; }
.article-header .nav-cta:hover{ background:var(--soft-black); color:var(--warm-white); }

.breadcrumb{ font-size:12.5px; letter-spacing:.04em; color:var(--stone); padding:36px 0 0; }
.breadcrumb a{ color:var(--taupe-dark); }
.breadcrumb a:hover{ color:var(--soft-black); }
.breadcrumb span{ margin:0 8px; color:var(--stone-light); }

/* ---- article shell ---- */
.article{ padding:40px 0 clamp(64px,10vw,120px); }
.article .measure{ max-width:720px; margin:0 auto; }

.article h1{
  font-size:clamp(30px,4.4vw,50px); line-height:1.12; margin:20px 0 22px;
}
.article .byline{
  font-size:13px; color:var(--stone); letter-spacing:.03em;
  padding-bottom:28px; border-bottom:1px solid var(--divider); margin-bottom:36px;
}
.article .byline strong{ color:var(--text-body); font-weight:600; }

/* key-points / answer box — the AEO summary */
.keypoints{
  background:var(--paper); border-left:2px solid var(--taupe);
  padding:26px 30px; margin:0 0 36px;
}
.keypoints h2{
  font-family:var(--font-sans); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--taupe-dark); margin-bottom:14px;
}
.keypoints ul{ list-style:none; }
.keypoints li{ padding:7px 0 7px 20px; position:relative; font-size:15px; line-height:1.7; color:var(--text-body); }
.keypoints li::before{ content:'—'; position:absolute; left:0; color:var(--taupe); }

.article .lead{
  font-family:var(--font-serif); font-size:20px; line-height:1.66; color:var(--taupe-dark);
  margin-bottom:32px;
}

.article-body h2{
  font-size:clamp(22px,2.7vw,30px); line-height:1.28; margin:44px 0 16px;
}
.article-body h3{ font-size:19px; margin:30px 0 10px; }
.article-body p{ font-size:16.5px; line-height:1.78; color:var(--text-body); margin-bottom:20px; }
.article-body strong{ color:var(--soft-black); font-weight:600; }
.article-body ul, .article-body ol{ margin:0 0 22px 22px; }
.article-body li{ font-size:16px; line-height:1.75; color:var(--text-body); margin-bottom:8px; }
.article-body a{ color:var(--taupe-dark); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--champagne); }
.article-body a:hover{ text-decoration-color:var(--taupe); }

.article-body blockquote{
  font-family:var(--font-serif); font-size:19px; line-height:1.6; color:var(--taupe-dark);
  border-left:2px solid var(--champagne); padding-left:22px; margin:28px 0;
}

/* framework strip */
.fw-strip{
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  background:var(--soft-black); color:var(--warm-white);
  padding:24px 26px; margin:30px 0; font-family:var(--font-serif); font-size:14.5px;
}
.fw-strip b{ color:var(--champagne); font-weight:500; }
.fw-strip .sep{ color:var(--taupe); }

/* comparison table */
.cmp{ width:100%; border-collapse:collapse; margin:24px 0 30px; font-size:14.5px; }
.cmp th, .cmp td{ border:1px solid var(--divider); padding:12px 14px; text-align:left; vertical-align:top; line-height:1.6; }
.cmp th{ background:var(--paper); font-family:var(--font-sans); font-weight:600; color:var(--soft-black); }
.cmp td:first-child{ font-weight:600; color:var(--soft-black); white-space:nowrap; }
.cmp-wrap{ overflow-x:auto; }

/* inline CTA */
.inline-cta{
  border:1px solid var(--divider); background:var(--warm-white);
  padding:30px 32px; margin:40px 0;
}
.inline-cta .eyebrow{ display:block; margin-bottom:10px; }
.inline-cta p{ font-size:15px; color:var(--stone); margin:8px 0 20px; line-height:1.7; }
.inline-cta .btn{ font-size:12px; padding:13px 26px; }

/* FAQ reuse .faq-item from styles.css; just spacing */
.article .faq-block{ margin-top:52px; }
.article .faq-block > h2{ font-size:24px; margin-bottom:8px; }

/* related */
.related{ margin-top:56px; padding-top:32px; border-top:1px solid var(--divider); }
.related h2{ font-size:16px; font-family:var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--stone); margin-bottom:16px; }
.related a{ display:block; font-family:var(--font-serif); font-size:18px; color:var(--soft-black); padding:9px 0; }
.related a:hover{ color:var(--taupe-dark); }

.sample-flag{
  background:#F4EEDD; border:1px dashed var(--champagne); color:var(--taupe-dark);
  font-size:12.5px; letter-spacing:.03em; padding:10px 16px; margin:24px auto 0; max-width:720px; text-align:center;
}

/* ---- index / hub ---- */
.hub-hero{ padding:clamp(60px,10vw,120px) 0 0; }
.hub-hero .eyebrow{ display:block; margin-bottom:20px; }
.hub-hero h1{ font-size:clamp(34px,5vw,60px); line-height:1.08; }
.hub-hero p{ max-width:560px; margin-top:22px; color:var(--stone); font-size:16px; }

.post-list{ display:grid; gap:2px; margin:56px 0 0; border-top:1px solid var(--divider); }
.post-card{ display:block; padding:34px 0; border-bottom:1px solid var(--divider); }
.post-card:hover{ background:var(--paper); }
.post-card .meta{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe-dark); }
.post-card h2{ font-size:clamp(22px,2.6vw,28px); line-height:1.25; margin:12px 0 10px; }
.post-card p{ font-size:15px; color:var(--stone); line-height:1.7; max-width:640px; }

@media (max-width:860px){
  .article-header .nav-links{ display:none; }
}