/* ============================================================
   机器人产业知识图谱 · Design System (base.css)
   ------------------------------------------------------------
   合集视觉规范的实体化。三篇已有 HTML 各自内联自洽、可独立
   打开；本文件是 ①合集门户 index.html 的样式源 ②新篇起点
   模板 ③design tokens 文档。
   ------------------------------------------------------------
   色板：graphite ink + drafting-paper 网格 + 琥珀工业色
   字体：Space Grotesk (display) / IBM Plex Mono (mono) / PingFang (body)
   ============================================================ */

:root{
  --ink:#16181d;          /* graphite text */
  --ink-2:#3a404b;
  --slate:#6b7280;        /* muted */
  --slate-2:#9aa1ad;
  --paper:#f4f6f8;        /* cool drafting paper */
  --paper-2:#eef1f4;
  --card:#ffffff;
  --hair:#dde2e8;         /* hairline */
  --hair-2:#e8ecf0;
  --amber:#e2531d;        /* industrial / KUKA-inspired accent */
  --amber-bright:#ff6a2b;
  --amber-soft:#fbe6dc;
  --petrol:#1e6e78;       /* chart secondary / logic accent */
  --gold:#c8902f;         /* chart tertiary / 转折 */
  --steelblue:#46586e;
  --ok:#2f8f5b;           /* 兴 / 上升 */
  --danger:#c0392b;       /* 衰 / 下降 */
  --grid:#e4e7ec;
  --shadow:0 1px 2px rgba(22,24,29,.04),0 8px 28px rgba(22,24,29,.06);
  --display:"Space Grotesk","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --body:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--hair-2) 1px,transparent 1px),linear-gradient(90deg,var(--hair-2) 1px,transparent 1px);
  background-size:46px 46px;background-position:-1px -1px;
}
::selection{background:var(--amber);color:#fff}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0}
a{color:var(--amber);text-decoration:none}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- top ruler nav ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(244,246,248,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:54px;gap:18px}
.brand{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink);font-weight:600;white-space:nowrap}
.brand b{color:var(--amber)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--slate);padding:6px 9px;border-radius:6px;transition:.18s}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
@media(max-width:860px){.nav{display:none}}

/* ---------- ruler motif ---------- */
.ruler{height:14px;position:relative;overflow:hidden}
.ruler::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px 14px);opacity:.9}

/* ---------- hero ---------- */
.hero{position:relative;padding:78px 0 56px;overflow:hidden}
.hero .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;color:var(--amber);text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.hero .eyebrow::before{content:"";width:34px;height:2px;background:var(--amber)}
.hero h1{font-size:clamp(34px,5.8vw,68px);font-weight:700;letter-spacing:-.025em;line-height:1.04}
.hero h1 .yr{font-family:var(--mono);font-weight:500;color:var(--slate);font-size:.42em;letter-spacing:0;vertical-align:.18em}
.hero .lede{max-width:740px;margin-top:26px;font-size:18px;color:var(--ink-2);line-height:1.75}
.hero .lede b{color:var(--ink);font-weight:600}
.hero .meta{margin-top:24px;font-family:var(--mono);font-size:12px;color:var(--slate);letter-spacing:.02em;display:flex;gap:22px;flex-wrap:wrap}
.hero .meta span b{color:var(--ink)}

/* ---------- sections ---------- */
section{padding:64px 0;border-top:1px solid var(--hair)}
.sechead{display:flex;align-items:baseline;gap:18px;margin-bottom:8px}
.secnum{font-family:var(--mono);font-size:13px;color:var(--amber);font-weight:600;letter-spacing:.05em}
.sectitle{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.02em}
.seclabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--slate);text-transform:uppercase;margin-bottom:18px}
.seclede{max-width:820px;color:var(--ink-2);font-size:17px;margin-bottom:34px}
.seclede b{color:var(--ink);font-weight:600}

/* ---------- callout ---------- */
.callout{background:var(--amber-soft);border-left:4px solid var(--amber);border-radius:0 12px 12px 0;padding:20px 24px;margin:26px 0;font-size:15.5px;color:var(--ink-2)}
.callout b{color:var(--ink)}
.callout.petrol{background:#e6f2f3;border-left-color:var(--petrol)}
.callout.gold{background:#f8f0e0;border-left-color:var(--gold)}
.callout.dark{background:var(--ink);color:#e6e8ec;border-left-color:var(--amber)}
.callout.dark b{color:#fff}

/* ---------- generic card ---------- */
.card{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:24px 22px;box-shadow:var(--shadow)}

/* ---------- footer ---------- */
footer{padding:50px 0 70px;border-top:1px solid var(--hair);text-align:center}
footer .wrap{max-width:760px}
footer p{font-size:13.5px;color:var(--slate);margin:6px 0}
footer .src{font-family:var(--mono);font-size:12px;color:var(--slate-2);margin-top:18px;line-height:1.9}
footer a{color:var(--slate);border-bottom:1px dotted var(--slate-2)}
footer a:hover{color:var(--amber)}

/* ---------- reveal animation ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}