/* 全站设计变量。改颜色、字体、版心宽度,只改这一个文件,所有页面一起生效。 */
:root {
  /* 颜色 */
  --ink: #000000;
  --paper: #ffffff;
  --mist: #f6f6f6;          /* 浅灰底:品牌墙、媒体墙 */
  --accent: #00b3ad;        /* 品牌青:导航当前页、标题强调词、编号方块、短横线、LinkedIn */
  --accent-bright: #19dad3; /* 亮青:Events 页 GCSx 标题(首页大标题 2026-09-14 改版后不再用) */
  --line: #b3b3b3;          /* 首页 How It Works 卡片描边 */
  --line-soft: #d6d6d6;     /* 文章卡片、活动卡片、分享栏的浅描边 */
  --rule: #7f7f7f;          /* About 区的竖分隔线 */

  /* News Centre 活动地图(浅色浮雕,和上下白色区块融成一片)。
     陆地的颜色、厚度、投影写在 tools/build-world-map.js 里 —— 底图是 SVG 图片,读不到这里的变量 */
  --map-pin: #00b3ad;       /* 城市点、点亮时的光环(= --accent) */
  --map-glow: 0 179 173;    /* 点亮时的光晕、时间线高亮底色。RGB 三个数,配透明度用:rgb(var(--map-glow) / 0.3) */
  --map-ink: #00756f;       /* 青色小字、GCSx 徽章:白底 5.6:1(--accent 只有 2.6:1,只能用在大字和图形上) */
  --map-muted: #4d4d4d;     /* 提示语、卡片正文、时间线下方的城市名:白底 8.5:1 */
  --danger: #b42318;        /* 出错提示(登记表没发出去):--mist 底上 6.2:1 */

  /* 字体 */
  --font-body: "raleway", "Helvetica Neue", Arial, sans-serif;
  --font-display: "oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-number: "inter", "Helvetica Neue", Arial, sans-serif;

  /* 版心 */
  --content: 980px;  /* 正文列(1440 宽时左右各留 230) */
  --frame: 1200px;   /* 页头、页脚(1440 宽时左右各留 120) */
  --gutter: 24px;    /* 窄屏时的最小左右留白 */
  --header-h: 113px;
  --top-gap: 13px;   /* 原站页面最顶上留的一条白边(线上真站实测大图从 y=13 开始),不要可以改成 0 */
  --fit-width: 1254px; /* 窗口比这个窄就整页等比缩小(js/fit.js),和原站复刻版量出来的一致 */
  --vw: 14.4px;        /* 大图高度、大标题里用的「1vw」。电脑上固定按 1440 设计稿算:原站在电脑上不随窗口变 */

  /* 深蓝黑:首页大图的渐变遮罩、滚动后的页头底色。
     写成 RGB 三个数,好配透明度用:rgb(var(--night) / 0.8) */
  --night: 8 18 24;

  /* 首页大标题的字影:1px 实边压出厚度 + 近处柔影托住轮廓 + 远处大柔影把字从照片里提出来 */
  --hero-text-shadow: 0 1px 0 rgb(0 0 0 / 0.25), 0 4px 14px rgb(0 0 0 / 0.45), 0 12px 40px rgb(0 0 0 / 0.35);

  /* 往下滚动后固定在顶端的矮页头 */
  --header-stuck-h: 64px;

  /* 进场动效(和原站一致:上浮 60px + 淡入) */
  --ease-float: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* 手机(单列排版):大图和大标题跟着屏幕宽度缩 */
@media (max-width: 767px) {
  :root { --vw: 1vw; --header-stuck-h: 56px; }
}