/* 人工智能通识教育红皮书 · 网页版
   版式沿用 MIT AI & Education Report，配色与控件沿用清华 AIGE 体系页 */

:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --ink: #1d2340;
  --body: #2b3157;
  --muted: #5d6685;
  --line: #d8def0;
  --brand: #7a33b6;
  --brand-deep: #5b258a;
  --brand-soft: #f3ecfb;
  --accent: #4d82ff;
  --shadow: 0 18px 48px rgba(49, 37, 98, 0.08);
  --max: 1160px;
  --toc-w: 318px;
  --head-h: 74px;
  --anchor-off: 98px;   /* sticky header + breathing room */
}

* { box-sizing: border-box; }
/* the document is ~230 000px tall: smooth scrolling would crawl on every jump */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

.skip { position: fixed; z-index: 99; top: -80px; left: 16px; padding: 12px 18px;
  border-radius: 999px; background: #fff; color: var(--brand-deep); font-weight: 700;
  box-shadow: var(--shadow); }
.skip:focus { top: 14px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--head-h);
  background: rgba(246, 247, 251, 0.88);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  width: min(calc(100% - 48px), var(--max));
  min-height: var(--head-h);
  margin: 0 auto;
  /* gap 2026-09-10 从 20px 收到 16px，与导航胶囊的内边距一并，
     给中心皮肤那个 19 个字的品牌名腾出余量（详见 .site-nav a）。 */
  display: flex; align-items: center; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 2px solid rgba(122, 51, 182, 0.2); border-radius: 50%;
  background: #fff; color: var(--brand);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 0.92rem; }
.brand-copy small { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.04em; }

.site-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 5px; border: 1px solid rgba(216, 222, 240, 0.86);
  border-radius: 999px; background: rgba(255, 255, 255, 0.7);
}
/* 内边距 2026-09-10 从 13px 收到 11px。导航栏加到五项之后，中心皮肤的页头
   （品牌名 19 个字，比体系长 54px）在 1160px 里**一点余量都不剩**，品牌那行
   中文会折成两行——而 .header-inner 卡在 var(--max)，多宽的屏幕都是 1160px，
   媒体查询救不了这一处，只能让内容自己变窄。五项各省 4px，共 20px。 */
.site-nav a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px;
  border-radius: 999px; color: #4a5270; font-size: 0.84rem; white-space: nowrap;
}
.site-nav a:hover { background: #fff; color: var(--brand-deep); }
.site-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; }
.nav-button {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 18px; flex: none;
  border-radius: 999px; color: #fff; font-size: 0.84rem; font-weight: 700;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow: 0 8px 18px rgba(77, 130, 255, 0.18);
}
.nav-toggle { display: none; }

/* ---------- language switch ---------- */
/* Outlined, not filled: the PDF button is the one call to action in the
   header, and a second solid pill next to it competes with it. */
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 15px; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--brand-deep); font-size: 0.84rem; font-weight: 700;
  white-space: nowrap;
}
.lang-toggle:hover { background: #fff; border-color: var(--brand); }

/* ---------- 全书核心概念 (PDF page 5) ---------- */
.concepts h2 { margin-bottom: 6px; }
.concepts-sub { margin: 0 0 26px; color: var(--muted); font-size: 1rem; }
.concept-grid { display: grid; gap: 16px; }
.concept {
  padding: 16px 22px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 12px; background: var(--surface);
}
/* override .doc h3/h4 — inside a card the generous chapter spacing is wrong */
.doc .concept h3 {
  margin: 0 0 8px; padding: 0; border: 0;
  color: var(--brand-deep); font-size: 1.05rem; font-weight: 700; line-height: 1.4;
}
.concept p { margin: 0 0 6px; font-size: 0.97rem; }
.doc .concept h4 {
  margin: 14px 0 6px; color: var(--ink);
  font-size: 0.92rem; font-weight: 700; line-height: 1.5;
}
/* the six dimensions and the four-capacity cycle read as a run, not a list */
.chain p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; }
.chain span { white-space: nowrap; }
/* · and ⟶ are laid out on the Latin baseline, which sits lower than the optical
   centre of the Han glyphs beside them — so they read as sunken and undersized.
   Lift and enlarge them to line up with the characters rather than the baseline. */
.chain .sep {
  color: var(--muted); line-height: 1;
  font-size: 1.15em; transform: translateY(-0.06em);
}
.chain-arrow .sep { font-size: 1.45em; transform: translateY(-0.11em); }
.chain-arrow span:not(.sep) { font-weight: 700; color: var(--brand-deep); }

/* ---------- machine-translation notice (English edition only) ---------- */
/* Not dismissible: a reader who lands mid-document from a search result
   should still meet it, so it also repeats in the footer. */
.mt-banner {
  margin: 0 0 34px; padding: 16px 20px;
  border: 1px solid #e6d6a8; border-left: 4px solid #c99a2e;
  border-radius: 12px; background: #fdf8ec;
  color: #5c4a1e; font-size: 0.92rem; line-height: 1.65;
}
.mt-banner strong { color: #4a3a12; }
.mt-banner a { color: var(--brand-deep); font-weight: 700; white-space: nowrap; }
.mt-banner a:hover { text-decoration: underline; }

/* ---------- hero ---------- */
.hero {
  padding: 68px 24px 72px;
  text-align: center; color: #fff;
  background:
    radial-gradient(circle at 50% 120%, rgba(255,255,255,0.16) 0, transparent 46%),
    linear-gradient(180deg, #7c379f 0%, #712f96 55%, #6c2f90 100%);
}
.hero-inner { width: min(100%, 880px); margin: 0 auto; }
.hero .eyebrow {
  margin: 0 0 18px; color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.14; }
.hero .sub {
  margin: 16px 0 0; font-size: clamp(1rem, 2vw, 1.28rem); font-weight: 500;
  color: rgba(255, 255, 255, 0.92); letter-spacing: 0.02em;
}
.hero .meta {
  margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; color: rgba(255, 255, 255, 0.72); font-size: 0.84rem;
}
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 全文页的 hero：左边一本书 ----------
   只有报告全文页带封面。附录页、贡献者页的标题是那一页自己的，
   旁边摆本书等于在说一件那页并不讲的事。 */
.hero-book .hero-inner {
  width: min(100%, 1000px);
  display: flex; align-items: center; justify-content: center; gap: 52px;
  text-align: left;
}
.hero-book .hero-copy { flex: 1 1 0; min-width: 0; }
.hero-book .book {
  flex: none; width: 200px; height: auto; border-radius: 3px;
  /* 书脊侧一道暗边 + 落影，让平面的封面立起来 */
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.22) inset, 0 22px 46px rgba(20, 8, 40, 0.42);
}
.hero-book .eyebrow, .hero-book .meta, .hero-book .hero-actions { justify-content: flex-start; }
.hero-book .meta { justify-content: flex-start; }

@media (max-width: 860px) {
  /* 窄屏堆成一列，书缩小居中——横着排会把标题挤成每行两三个字 */
  .hero-book .hero-inner { flex-direction: column; gap: 28px; text-align: center; }
  .hero-book .book { width: 148px; }
  .hero-book .eyebrow, .hero-book .meta, .hero-book .hero-actions { justify-content: center; }
}
@media print { .hero-book .book { display: none; } }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
}
.button-primary { background: #fff; color: var(--brand-deep); }
.button-secondary { border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }

/* ---------- layout ---------- */
.layout {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto; padding: 56px 0 96px;
  display: grid; grid-template-columns: var(--toc-w) minmax(0, 1fr);
  gap: 56px; align-items: start;
}

/* 名单页与版权页没有侧栏目录：内容只有一屏多，正文居中占满 */
.layout-solo { grid-template-columns: minmax(0, 1fr); }
.layout-solo .doc { max-width: 820px; margin: 0 auto; }

/* ---------- table of contents ---------- */
.toc { position: sticky; top: calc(var(--head-h) + 20px); max-height: calc(100vh - var(--head-h) - 48px); overflow: auto; }
.toc-title { margin: 0 0 16px; font-size: 1.28rem; }
.toc nav { border-top: 1px solid var(--line); }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a {
  display: block; padding: 7px 10px 7px 12px;
  border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
  color: #40476b; font-size: 0.855rem; line-height: 1.5;
}
.toc a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.toc a.is-current { border-left-color: var(--brand); background: var(--brand-soft);
  color: var(--brand-deep); font-weight: 700; }
.toc-part > a { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.toc-chapter > a { padding-left: 20px; }
.toc-section { display: none; }
.toc-chapter.is-open .toc-section { display: block; }
.toc-section a { padding-left: 34px; color: var(--muted); font-size: 0.8rem; }
.toc-foot { margin: 22px 0 8px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.76rem; line-height: 1.7; }

/* ---------- document ---------- */
.doc { min-width: 0; max-width: 782px; }
.doc p, .doc li { color: var(--body); font-size: 1.0625rem; line-height: 1.95; }
.doc p { margin: 0 0 1.45em; }
.doc > section, .doc h2, .doc h3, .doc h4 { scroll-margin-top: var(--anchor-off); }

.part-open { margin: 76px 0 8px; padding-top: 40px; border-top: 2px solid var(--ink); }
.part-open:first-child { margin-top: 0; }
.part-open .label { display: block; margin-bottom: 12px; color: var(--brand);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; }
.part-open h2 { font-size: clamp(1.9rem, 3.6vw, 2.65rem); line-height: 1.25; }
.part-open .rule { height: 3px; margin-top: 22px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%); }

.chapter { margin-top: 64px; }
.chapter > .num { display: block; margin-bottom: 10px; color: var(--brand);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; }
.chapter > h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.3; }
.doc h3 { margin: 52px 0 18px; font-size: 1.42rem; line-height: 1.45; }
.doc h4 { margin: 36px 0 14px; font-size: 1.1rem; line-height: 1.5; color: #333b63; }
.doc h3 .n, .doc h4 .n { margin-right: 0.5em; color: var(--brand); font-variant-numeric: tabular-nums; }

.abstract {
  margin: 28px 0 8px; padding: 26px 28px;
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
}
.abstract .lab { display: block; margin-bottom: 10px; color: var(--brand);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; }
.abstract p { margin: 0; font-size: 0.97rem; line-height: 1.85; color: #3a4166; }
.keywords { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.keywords span { padding: 5px 11px; border-radius: 999px; background: var(--brand-soft);
  color: var(--brand-deep); font-size: 0.76rem; }

.doc ul, .doc ol.numbered { margin: 0 0 1.45em; padding-left: 1.35em; }
.doc li { margin-bottom: 0.6em; }
.doc li::marker { color: var(--brand); }

figure.tbl { margin: 34px 0; }
figure.tbl figcaption { margin-bottom: 12px; color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.tbl-scroll { overflow-x: auto; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tbl th, .tbl td { padding: 13px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); line-height: 1.7; }
.tbl thead th { background: var(--brand-soft); color: var(--brand-deep);
  font-weight: 700; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- 流程图 ----------
   书里的 TikZ 图是线性链，印成四个一排的蛇形回折。正文列放不下四个，也没法回折，
   所以排成网格、按阅读顺序折行：行内的箭头指右，行末的箭头指下（指右就指到版心外
   的空白去了）。哪一个卡片位于行末取决于列数，所以箭头画在样式里而不是结构里。 */
figure.flow { margin: 38px 0; }
figure.flow figcaption { margin-top: 30px; color: var(--muted);
  font-size: 0.84rem; font-weight: 700; text-align: center; }
.flow .chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }
.flow .step { position: relative; display: flex; flex-direction: column;
  justify-content: center; padding: 14px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); text-align: center; line-height: 1.55; }
.flow .step b { display: block; color: var(--ink); font-size: 0.88rem; }
.flow .step span { display: block; color: var(--muted); font-size: 0.8rem; }
.flow .step.key { border-color: var(--brand); background: var(--brand-soft); }
.flow .step.key b { color: var(--brand-deep); }
.flow .step:not(:last-child)::after { content: "\2192"; position: absolute;
  right: -22px; top: 50%; transform: translateY(-50%);
  color: var(--brand); font-size: 1.05rem; line-height: 1; }
.flow .step:nth-child(3n):not(:last-child)::after { content: "\2193";
  right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%); }
@media (max-width: 900px) {
  .flow .chain { grid-template-columns: repeat(2, 1fr); }
  .flow .step:nth-child(3n):not(:last-child)::after { content: "\2192";
    right: -22px; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
  .flow .step:nth-child(2n):not(:last-child)::after { content: "\2193";
    right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%); }
}
@media (max-width: 560px) {
  .flow .chain { grid-template-columns: 1fr; }
  .flow .step:not(:last-child)::after { content: "\2193" !important;
    right: auto !important; left: 50% !important; top: auto !important;
    bottom: -26px !important; transform: translateX(-50%) !important; }
}

/* ---------- 贡献者名单 ----------
   书里排成五列表格，网页上列宽没有含义，排成一行行姓名即可 */
.credits .credit { margin: 0 0 26px; }
.credits .credit h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--brand-deep); }
.credits .credit p { margin: 0; color: var(--body); font-size: 0.92rem; line-height: 2; }
/* 名单后的两条小字说明，书里是 \footnotesize 的星号条目 */
.credits .credit-notes { margin: 26px 0 0; padding: 0; list-style: none; }
.credits .credit-notes li { position: relative; margin: 0 0 8px; padding-left: 1.1em;
  color: var(--muted); font-size: 0.84rem; line-height: 1.85; }
.credits .credit-notes li::before { content: "*"; position: absolute; left: 0; }
/* 名单页的 h2 与 hero 大标题同名，留给文档大纲与 verify.py，不占版面 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---------- 版权与开放许可 ---------- */
.license p { margin: 0 0 14px; font-size: 0.94rem; line-height: 1.9; }
/* 开放共建页只有一个小标题，它就是那一页的 h2（版权页的是 h3，上面还罩着
   一个 sr-only 的页标题）。两种都按小标题排，别让它落进 .chapter > h2 的大字号。 */
.license h3, .license > h2:not(.sr-only) {
  margin: 30px 0 12px; font-size: 1.02rem; color: var(--brand-deep); }
.license > h2:not(.sr-only):first-child { margin-top: 0; }
.license .lic-field { display: flex; flex-wrap: wrap; gap: 0 .2em; margin: 0 0 8px; }
.license .lic-field strong { flex: none; color: var(--ink); }
.license a { color: var(--brand-deep); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.license a:hover { color: var(--accent); }

.tbl th:first-child, .tbl td:first-child { min-width: 6.5em; }

.refs { margin: 0; padding: 0; list-style: none; }
.refs li { margin-bottom: 1.1em; padding-left: 2em; text-indent: -2em;
  font-size: 0.92rem; line-height: 1.8; color: var(--body); word-break: break-word; }

.sig { margin: 2.4em 0 0; text-align: right; color: var(--muted); font-size: 0.95rem; line-height: 1.9; }

/* ---------- footer / back to top ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner { width: min(calc(100% - 48px), var(--max)); margin: 0 auto;
  padding: 40px 0; display: flex; flex-wrap: wrap; gap: 18px 40px;
  align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 0.82rem; line-height: 1.8; }
.footer-inner a { color: var(--brand-deep); font-weight: 700; }

.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 30;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  color: #fff; font-size: 1.1rem; box-shadow: 0 10px 26px rgba(77, 130, 255, 0.32);
  opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
}
.to-top.is-on { opacity: 1; visibility: visible; }

/* ---------- responsive ---------- */
/* 页头排不下时先收品牌文字：左上角的标本身就是回首页的链接，而导航栏少一项
   就没法用。⚠️ 这个档位是**按体系皮肤的品牌名**定的（16 个字，页头要 1057px）；
   中心皮肤那个名字 19 个字，要到 1181px，它自己的档位在 skin-center/override.css。
   2026-09-10 导航栏加到五项时量过：体系版在 1081px 上还剩 24px 余量。 */
@media (max-width: 1080px) {
  :root { --toc-w: 260px; }
  .layout { gap: 36px; }
  .brand-copy { display: none; }
}
@media (max-width: 860px) {
  :root { --anchor-off: 16px; }
  .site-header { position: static; }
  .header-inner { flex-wrap: wrap; gap: 10px; padding: 12px 0; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-copy { display: grid; min-width: 0; }
  .brand-copy strong { font-size: 0.82rem; }
  .brand-copy small { display: none; }
  .nav-button { order: 2; min-height: 36px; padding: 0 14px; }
  .lang-toggle { order: 1; min-height: 36px; padding: 0 12px; }
  .mt-banner { margin-bottom: 26px; padding: 14px 16px; font-size: 0.88rem; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
  .layout { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .toc { position: static; max-height: none; padding: 18px 20px;
    border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
  .toc[data-collapsed="true"] nav, .toc[data-collapsed="true"] .toc-foot { display: none; }
  .toc-title { display: flex; align-items: center; justify-content: space-between;
    margin: 0; cursor: pointer; }
  .toc-title::after { content: "▾"; color: var(--brand); }
  .toc[data-collapsed="true"] .toc-title::after { content: "▸"; }
  .toc[data-collapsed="true"] .toc-title { margin: 0; }
  .toc nav { margin-top: 14px; }
  .toc-chapter .toc-section { display: none; }
  .doc { max-width: none; }
  .to-top { right: 16px; bottom: 16px; }
}

/* ---------- print ---------- */
@media print {
  :root { --anchor-off: 0; }
  .site-header, .toc, .to-top, .hero-actions, .skip { display: none !important; }
  body { background: #fff; }
  .hero { padding: 0 0 24px; color: #000; background: none; text-align: left;
    border-bottom: 2px solid #000; }
  .hero .eyebrow, .hero .sub, .hero .meta { color: #000; }
  .hero .meta { justify-content: flex-start; }
  .layout { display: block; width: auto; padding: 0; }
  .doc { max-width: none; }
  .doc p, .doc li { font-size: 10.5pt; line-height: 1.75; color: #000; }
  .abstract, .tbl-scroll { box-shadow: none; border: 1px solid #bbb; }
  .chapter { break-before: page; }
  .part-open { break-before: page; }
  h2, h3, h4 { break-after: avoid; }
  figure.tbl, .abstract { break-inside: avoid; }
}

.doc p.footnote {
  margin: 30px 0 24px; padding-top: 14px;
  border-top: 1px solid var(--line);
  max-width: 34em; color: var(--muted); font-size: 0.86rem; line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════════
   中心皮肤覆盖层 —— 由 site.py --center 追加在共用样式之后
   
   为什么用追加而不是改共用样式：两套皮肤共用 redbook.css，体系版那份
   要保持它自己的配色（沿用体系页）。追加意味着体系版将来怎么改，
   这里都不会被改坏，冲突时靠层叠顺序取胜。
   ══════════════════════════════════════════════════════════════════ */

:root {
  --brand:      #7D26CD;   /* 中心首页按钮与链接的主紫 */
  --brand-deep: #6a1fb0;   /* 中心首页的 hover 深色态 */
  --accent:     #3b82f6;   /* = tailwind blue-500，中心首页分隔线同款 */
}

/* hero 取色自中心首页的 ba1.png（顶 #5e2869、底 #712c7f）。
   只取渐变，不要那张图里的二校门暗纹——红皮书 hero 内容比首页多一截，
   暗纹会正好压在两个按钮上。 */
.hero {
  background:
    radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.16) 0, transparent 46%),
    linear-gradient(180deg, #5e2869 0%, #712c7f 100%);
}

/* 徽标：清华校徽 + AI 图形，取自中心首页 logo 的图形部分。
   背景图相对本文件解析，所以 en/ 子页面无需另写路径。
   模板里的 AIGE 三个字母保留在 DOM 中供读屏，font-size:0 只是视觉隐藏。 */
.brand-mark {
  display: inline-block;
  flex: none;
  width: 109px;            /* 277×112 等比缩到 44 高 */
  height: 44px;
  border: 0;
  border-radius: 0;
  background: url(logo-mark.png) left center / contain no-repeat;
  font-size: 0;
}

/* 页头：品牌文字比体系版更早收起。
   中心的品牌名 19 个字（体系 16 个），页头因此宽 54px；导航栏 2026-09-10 加到
   五项之后，要 1181px 才排得下，排不下时那行中文会折成两行。
   ⚠️ `.header-inner` 卡在 var(--max)=1160px，**再宽的屏幕页头也只有 1160px**，
   所以这不是「大屏幕就没事」的问题，只能自己变窄或者把文字收起来。
   共用样式里那个档位（1080px）是按体系的品牌名定的，对中心不够用。
   ⚠️ 下限必须写 861px：共用样式在 ≤860px 那档把 .brand-copy 放回来（手机上
   页头换行排，文字要露出来），本文件追加在后面，不写下限会把它盖掉。 */
@media (min-width: 861px) and (max-width: 1180px) {
  .brand-copy { display: none; }
}