/* 首页专用区块:大图、About、四个卖点、Business 钉住背景、How It Works。 */

/* ---------- 大图 ---------- */
/* 大图区块从页面顶端算起(页头压在它上面),顶上留 --top-gap 白边,图从白边下面开始。
   顶端不再留白边:照片和渐变一直铺到页面顶端,页头压在渐变上。
   照片本身很亮:靠一层整幅的深蓝黑渐变托住文字(左深右透、底部略暗、顶部一条托住导航),
   文字直接落在照片上。右侧的 CES 立体大字是照片主体,遮罩到那里已经基本透明。
   左上角再加一片椭圆暗区托住两行大标题,到 CES 立体大字那里已经淡没了。 */
.hero {
  position: relative;
  height: calc(var(--top-gap) + var(--header-h) + clamp(480px, calc(55.56 * var(--vw)), 800px));
  color: var(--paper);
  background: var(--ink);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* 底边 230px 渐暗成深蓝黑,和下面那段(照片蒙版淡出 + 青色底色)一起让照片在自己区块里收干净。
       这组数值是 2026-09-21 在 Claude Design 里和他一起定的第三版,原样搬回来的 */
    linear-gradient(0deg, rgb(var(--night)) 0, rgb(var(--night) / 0.9) 40px, rgb(var(--night) / 0.62) 95px, rgb(var(--night) / 0.28) 160px, rgb(var(--night) / 0) 230px),
    radial-gradient(ellipse 72% 40% at 30% 25%, rgb(var(--night) / 0.85) 0%, rgb(var(--night) / 0.66) 55%, rgb(var(--night) / 0) 100%),
    linear-gradient(180deg, rgb(var(--night) / 0.6) 0, rgb(var(--night) / 0.45) 100px, rgb(var(--night) / 0) 220px),
    linear-gradient(90deg, rgb(var(--night) / 0.88) 0%, rgb(var(--night) / 0.62) 34%, rgb(var(--night) / 0.18) 58%, rgb(var(--night) / 0) 76%),
    linear-gradient(0deg, rgb(5 10 15 / 0.3) 0%, rgb(5 10 15 / 0) 40%);
}

/* 照片底边真的淡出成深蓝黑(不只是盖一层暗渐变),下三分之一偏到品牌青色系:
   照片在自己区块里收干净,再接下面白底的活动地图区 */
@media (min-width: 768px) {
  .hero { background: rgb(var(--night)); isolation: isolate; }
  .hero__bg {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 280px), rgb(0 0 0 / 0.45) calc(100% - 130px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 280px), rgb(0 0 0 / 0.45) calc(100% - 130px), transparent 100%);
  }
  .hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 340px;
    pointer-events: none;
    /* 不用 mix-blend-mode:混色模式在某些渲染路径下会把上面的标题一起去色 */
    background: linear-gradient(180deg, rgb(10 60 68 / 0) 0, rgb(10 60 68 / 0.38) 58%, rgb(8 46 54 / 0.55) 100%);
  }
}

.hero__body { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 96px); }

.hero__intro { max-width: 720px; } /* 82px 的「Global Connect Show」约 700px 宽,要能放进一行 */

/* 标题两行一样大、同样重要:青色「Global Connect Show」+ 白色「CES 2027」(沿用原站的两行式),
   左边一条 3px 青色竖线。字号上限 82px:再大「Global Connect Show」一行就伸到 CES 立体大字那一列了 */
.hero__title {
  margin-left: -27px; /* 竖线和留白往左外扩,文字左边仍和下面各区块的正文对齐 */
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, calc(5.7 * var(--vw)), 82px); /* 下限 34px:360 宽的手机上两行也都不折行 */
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-shadow: var(--hero-text-shadow);
}
.hero__brand { display: block; color: var(--accent-bright); }
.hero__event { display: block; color: var(--paper); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 28px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.92);
}
.hero__place { display: inline-flex; align-items: center; gap: 6px; }
.hero__pin { flex: none; font-size: 15px; line-height: 1; letter-spacing: 0; }

/* 报名按钮:和日期地点那行同一种大写字距,品牌青实心 + 深蓝黑字(7.2:1),悬停变白、箭头右移。
   .hero__actions 不要写 display:活动过期时 js/site.js 给它加 hidden,写了 display 就会把 hidden 顶掉 */
.hero__actions { margin-top: 36px; }
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(var(--night));
  background: var(--accent);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.28);
  transition: background-color 0.2s;
}
.hero__cta::after { content: "\2192"; content: "\2192" / ""; letter-spacing: 0; transition: transform 0.2s; }
.hero__cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
@media (hover: hover) {
  .hero__cta:hover { background: var(--paper); }
  .hero__cta:hover::after { transform: translateX(3px); }
}

/* ---------- About ---------- */
.about { padding-block: 109px 91px; }

.about__grid {
  display: grid;
  grid-template-columns: 345px 1px 1fr;
  align-items: start;
}

.about__title { max-width: 300px; margin-top: 71px; line-height: 1.175; }

.about__rule { width: 1px; height: 231px; background: var(--rule); }

.about__text { margin-left: 58px; padding-top: 5px; }
.about__text p { font-size: 16px; line-height: 28.8px; }
.about__text .lead { font-size: 22px; line-height: 30.8px; font-weight: 700; }
.about__text .lead + p { margin-top: 41.6px; }
/* 去 About 页的入口(2026-10-07):和 About 页的 .info-link 同一个样子 */
.about__more {
  display: inline-flex;
  gap: 8px;
  margin-top: 18px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.about__more::after { content: "→"; transition: transform 0.25s var(--ease-float); }
@media (hover: hover) { .about__more:hover::after { transform: translateX(5px); } }

/* ---------- 四个卖点 ---------- */
.pillars { background: var(--ink); color: var(--paper); }

.pillars__list {
  list-style: none;
  width: min(1040px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 77px 0 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.pillars__item { display: flex; flex-direction: column; align-items: center; }
.pillars__item::after {
  content: "";
  width: 40px;
  height: 5px;
  margin-top: 24.8px;
  background: var(--accent);
}

.pillars__label {
  min-height: 79.2px;
  max-width: 190px;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 24px;
  line-height: 26.4px;
  font-weight: 700;
  text-wrap: balance;
}

/* ---------- How It Works ---------- */
.how { padding-block: 114px 79px; }

.how__intro {
  display: grid;
  grid-template-columns: 500px 419px;
  column-gap: 49px;
  align-items: start;
}
.how__intro img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.how__intro-text { padding-top: 16px; }
.how__intro-text p { font-size: 18px; line-height: 28.8px; }
.how__lead-title { margin-bottom: 44px; font-size: clamp(28px, calc(2.64 * var(--vw)), 38px); line-height: 1.15; } /* 和 .how__title 同一大小 */
.how__intro-text p + p { margin-top: 28.8px; }

.how__title { margin-top: 69px; font-size: clamp(28px, calc(2.64 * var(--vw)), 38px); line-height: 1; }

.steps {
  list-style: none;
  padding: 0;
  margin-top: 41px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.step {
  position: relative;
  min-height: 274px;
  padding: 46px 21px 25px 23px;
  border: 1px solid var(--line);
}

.step__no {
  position: absolute;
  top: -1px;
  right: 19px;
  width: 46px;
  height: 44px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-number);
  font-size: 28px;
  line-height: 44px;
  text-align: center;
}

.step__title { font-size: 24px; line-height: 24px; font-weight: 700; }
.step p { margin-top: 24px; font-size: 16px; line-height: 25.6px; }

/* ---------- 全球活动地图(2026-09-21 从 News Centre 搬来,紧接在大图下面) ----------
   陆地底图 assets/img/world-map-light.svg(tools/build-world-map.js 生成:浅色陆地 + 投影 + 高光,海面透明);
   城市点 .map-pin、日期卡片 .map-tip、时间线 .map-tl 由 tools/sync.js 按 site.json 的 eventMap 生成;
   「下一站」(航线 .map-route + 小飞机 .map-plane、上一站 / 下一站标签 .map-stop、海报卡片 .map-next)由 sync.js 按 events.promos 生成。
   联动在 js/site.js:默认停在下一站(那个点亮着、一圈圈扩散,卡片、航线、标签在);
   指到 / 点别的城市、或时间线上的一格(GCS 一行、GCSx 一行各自可选)= .is-exploring(卡片和标签退下去、航线淡下去),
   移开回到下一站。已经过去的月份和城市 .is-past 调暗。点、航线、标签都按整张底图的百分比摆,地图怎么缩放都对得上。
   当天改了三版:深色压在大图上(卡片挡住美洲)→ 深色叠进大图 150px(他说还不是想要的)→
   第三版在 Claude Design 里和他一起定:自成一个白底区块、标题挪到地图上面、浅色浮雕底图(这一版)。 */
.event-map {
  --em-text: var(--map-strong);    /* 城市名、月份:白底 15:1 */
  --em-muted: var(--map-muted);    /* 白底 8.5:1 */
  --em-dim: #a7babe;               /* 已经过去的城市点 */
  --em-line: rgb(15 33 38 / 0.14);
  --em-pin: var(--map-pin);        /* #00b3ad,只用在点、线、描边这些图形上 */
  --em-ink: var(--map-ink);        /* #00756f,青色的字用这个:白底 5.6:1 */
  --em-bg: var(--map-surface);     /* 点和小字外面那圈提亮 */
  --em-glow: var(--map-glow);
  --em-fade-top: 7%;               /* 陆地从上沿淡入的范围(占底图高度) */
  padding-block: 88px 80px;
  color: var(--em-text);
  background: var(--map-surface);
  overflow-x: clip; /* 时间线末端的箭头、靠边的日期卡片不撑出横向滚动 */
}
.event-map [hidden] { display: none; }

.event-map__canvas { position: relative; }
/* 四边渐隐是整张图的蒙版(先画成一张图再蒙,Safari 里不起条纹):左右 6%、下边 17%,上边 --em-fade-top */
.event-map__land {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.3) calc(var(--em-fade-top) * 0.5), #000 var(--em-fade-top), #000 83%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.3) calc(var(--em-fade-top) * 0.5), #000 var(--em-fade-top), #000 83%, transparent 100%);
  mask-composite: intersect;
}
/* 点和航线的图层按底图的比例定高,不用 inset:0 —— 手机上卡片排在地图下面、同一个容器里,容器会比底图高 */
.event-map__pins,
.map-routes { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1200 / 535.1; }
.event-map__pins { z-index: 3; pointer-events: none; }

/* 城市点:可点区域 18px,看得见的点 10px */
.map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.map-pin::before,
.map-pin::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.map-pin::before {
  inset: 4px;
  background: var(--em-pin);
  box-shadow: 0 0 0 2px var(--em-bg), 0 0 8px 2px rgb(var(--em-glow) / 0.45);
  transition: transform 0.25s, background-color 0.25s, box-shadow 0.25s, opacity 0.25s;
}
.map-pin::after { inset: 0; border: 2px solid var(--em-pin); opacity: 0; } /* 亮起时一圈圈扩散的光环 */
.map-pin.is-past::before { background: var(--em-dim); box-shadow: 0 0 0 2px var(--em-bg); }
/* 办完了的城市(js/site.js 加 is-past:每一场都办完了,挂了回顾文章的也算):只是地图上一个灰点,指上去、点上去都没反应 */
.map-pin.is-past { cursor: default; pointer-events: none; }
.map-pin:focus-visible { outline: 2px solid var(--em-pin); outline-offset: 4px; }

.map-pin:focus-visible,
.map-pin.is-open,
.map-pin.is-lit { z-index: 3; }
.map-pin:focus-visible::before,
.map-pin.is-open::before,
.map-pin.is-lit::before {
  transform: scale(1.3);
  background: var(--em-pin);
  box-shadow: 0 0 0 3px var(--em-bg), 0 0 0 5px rgb(var(--em-glow) / 0.35), 0 0 18px 6px rgb(var(--em-glow) / 0.3);
}
.map-pin:focus-visible::after,
.map-pin.is-open::after,
.map-pin.is-lit::after { animation: map-ping 1.6s ease-out infinite; }
@keyframes map-ping {
  from { transform: scale(0.6); opacity: 0.9; }
  to { transform: scale(3.2); opacity: 0; }
}
/* 从时间线点亮一个月的城市时,其余的点退到后面 */
.event-map.has-lit .map-pin:not(.is-lit)::before { opacity: 0.3; box-shadow: none; }

/* 点亮时点旁边的城市名(日期卡片打开时卡片里已经有名字,就不重复) */
.map-pin__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  color: var(--em-text);
  text-shadow: 0 0 3px var(--em-bg), 0 0 6px var(--em-bg), 0 1px 10px var(--em-bg);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.map-pin--label-left .map-pin__label { left: auto; right: calc(100% + 6px); }
.map-pin.is-lit .map-pin__label { opacity: 1; }
.map-pin:focus-visible .map-pin__label,
.map-pin.is-open .map-pin__label { opacity: 0; }

/* 日期卡片。横向按点在地图上的位置对齐:translateX(-x%),靠左的点往右展开、靠右的往左展开,伸不出地图 */
.map-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: max-content;
  max-width: 260px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--map-surface);
  box-shadow: 0 14px 34px rgb(15 33 38 / 0.16);
  text-align: left;
  transform: translate(calc(-1 * var(--x)), 6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s;
}
.map-pin--up .map-tip { top: auto; bottom: calc(100% + 10px); transform: translate(calc(-1 * var(--x)), -6px); }
.map-pin:focus-visible .map-tip,
.map-pin.is-open .map-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-1 * var(--x)), 0);
  transition: opacity 0.18s, transform 0.18s;
}
.map-tip__city { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--em-text); }
.map-tip__row { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; white-space: nowrap; color: var(--em-muted); }
.map-tip__when { min-width: 5.4em; font-weight: 700; color: var(--em-text); font-variant-numeric: lining-nums tabular-nums; }

.map-badge {
  display: inline-block;
  padding: 0 7px;
  border: 1px solid var(--em-pin);
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--em-ink);
}
.map-badge--gcs { border-color: var(--em-text); background: var(--em-text); color: var(--em-bg); }

/* 航线:底下一条粗而淡的当光晕,上面一条细的。线宽是底图单位(电脑上 1 单位 = 1px) */
.map-routes { z-index: 2; overflow: visible; pointer-events: none; }
.map-route { transition: opacity 0.25s; }
.map-route > path { fill: none; stroke-linecap: round; }
.map-route__glow { stroke: rgb(var(--em-glow) / 0.18); stroke-width: 7; }
.map-route__line { stroke: var(--em-pin); stroke-width: 2; }
/* 小飞机:位置和朝向写在 transform 属性上(sync 给的是停在航线 0.6 处的样子,脚本接管后沿线飞) */
.map-plane path { fill: var(--em-ink); stroke: var(--em-bg); stroke-width: 1.4; stroke-linejoin: round; paint-order: stroke; }

/* 挂在点旁边的小块:城市 / 哪场 · 日期 / 状态(Completed 上一站、Upcoming 下一站)。
   Featured(首页大图讲的那场主场)第三版在 Claude Design 里定成不常显:指到那个点再看日期卡片,所以 sync 不再生成 */
.map-stop { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 0; height: 0; pointer-events: none; transition: opacity 0.25s, visibility 0s; }
.map-stop__in {
  position: absolute;
  left: 13px;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  white-space: nowrap;
  transform: translateY(-50%);
  text-shadow: 0 0 3px var(--em-bg), 0 0 8px var(--em-bg), 0 1px 12px var(--em-bg);
}
/* 挂在哪一边是 sync.js 按几何挑的(不压住别的城市点、航线、卡片),六个方向;间距和 sync.js 的 STOP_GAP 一致(13 / 24 / 10) */
.map-stop--left .map-stop__in { left: auto; right: 13px; align-items: flex-end; text-align: right; }
.map-stop--below .map-stop__in,
.map-stop--below-left .map-stop__in { left: 10px; top: 24px; transform: none; }
.map-stop--above .map-stop__in,
.map-stop--above-left .map-stop__in { left: 10px; top: auto; bottom: 24px; transform: none; }
.map-stop--below-left .map-stop__in,
.map-stop--above-left .map-stop__in { left: auto; right: 10px; align-items: flex-end; text-align: right; }
.map-stop__city { font-size: 16px; line-height: 1.15; font-weight: 700; color: var(--em-text); }
.map-stop__when {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--em-muted);
  font-variant-numeric: lining-nums;
}
.map-stop__chip {
  margin-top: 3px;
  padding: 1px 8px;
  border: 1px solid rgb(15 33 38 / 0.22);
  border-radius: 4px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--em-muted);
  background: rgb(255 255 255 / 0.9);
  text-shadow: none;
}
.map-stop--next .map-stop__chip { border-color: var(--em-ink); background: var(--em-ink); color: var(--em-bg); }

/* 下一站卡片:地图右下角(南半球那片没有城市点的地方),横向:海报 + 文字;同时有几场只露最近的一张 */
.map-next {
  position: absolute;
  right: 1%;
  bottom: 3%;
  z-index: 4;
  display: grid;
  width: 440px;
  pointer-events: none; /* 格子按最高那张卡片占位:透明的那截不挡住下面的城市点(露出来的卡片自己接指针) */
  transition: opacity 0.25s, transform 0.25s, visibility 0s;
}
/* 下一站卡片(轮播时几张)和 Coming soon 卡片叠在同一格里,贴着底边 */
.map-next > * { grid-area: 1 / 1; align-self: end; pointer-events: auto; }
.map-next--west { right: auto; left: 1%; } /* 这一站在东半边(欧亚)时放左下角,别压在它旁边 */
.map-next__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--map-surface);
  box-shadow: 0 16px 40px rgb(15 33 38 / 0.14);
  transition: opacity 0.25s, transform 0.25s, visibility 0s;
}
.map-next__card:not([hidden]) ~ .map-next__card { display: none; }
/* 几场同时在宣传时轮播(js/site.js 加 is-rotating,当前那张 is-current):几张卡片叠在同一格里,容器按最高那张占位,
   手机上卡片排在地图下面,换卡片时下面的内容不跳。没露出来的那几张不接指针(visibility:hidden)。
   指到别的城市时轮播会当场跳过去(不飞):换下去的那张淡出、换上来的淡入,两张不会同时实着叠在一起 */
.map-next.is-rotating .map-next__card:not([hidden]) { display: flex; position: relative; visibility: hidden; opacity: 0; transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s; }
.map-next.is-rotating .map-next__card.is-current { visibility: visible; opacity: 1; transition: opacity 0.25s, transform 0.25s, visibility 0s; }
/* 右上角的小圆点:第几场,点了直接跳过去。按钮 24px 见方(好点),圆点本身 8px */
.map-next__pager { position: absolute; top: 4px; right: 6px; display: flex; }
.map-next__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.map-next__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--em-muted);
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s;
}
.map-next__dot[aria-current="true"]::before { border-color: var(--em-ink); background: var(--em-ink); }
.map-next__dot:focus-visible { outline: 2px solid var(--em-ink); outline-offset: -2px; border-radius: 50%; }
.map-next__poster { flex: none; width: 112px; height: 112px; object-fit: cover; border-radius: 8px; }
.map-next__text { min-width: 0; }
.map-next__kicker {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--em-ink);
}
.map-next__city { margin-top: 2px; font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 500; color: var(--em-text); }
.map-next__name { margin-top: 2px; font-size: 14px; line-height: 1.35; font-weight: 700; }
.map-next__meta { display: flex; align-items: flex-start; gap: 7px; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--em-muted); }
.map-next__meta + .map-next__meta { margin-top: 2px; }
.map-next__icon { flex: none; width: 1em; height: 1em; margin-top: 0.17em; color: var(--em-ink); }
.map-next__nw { white-space: nowrap; } /* 日期、时间各自不断行,放不下时时间整段换行 */
.map-next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; }
.map-next__btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  text-decoration: none;
  color: var(--map-surface);
  background: var(--map-btn);
  transition: background-color 0.2s;
}
.map-next__btn::after,
.event-map__all::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 6px; transition: transform 0.2s; }
.map-next__more,
.event-map__all {
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--em-pin);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* 在看别的城市 / 月份:标签退下去,航线淡下去;卡片那个位置换成 Coming soon(脚本给 .map-next 加 is-soon)。
   没有 Coming soon 卡片的旧标记(.event-map 上没有 js-soon)照老样子:整个卡片区退下去 */
.event-map.is-exploring:not(.js-soon) .map-next,
.event-map.is-exploring .map-stop { opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s; }
.event-map.is-exploring:not(.js-soon) .map-next { transform: translateY(8px); }
.event-map.is-exploring .map-route { opacity: 0.18; }
.map-next.is-soon .map-next__card,
.map-next.is-soon .map-next__card.is-current { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s; }

/* Coming soon 卡片(sync.js 的 mapSoonHtml,js/site.js 按点开的城市 / 月份填):点开没有宣传中活动的地方时,
   放在下一站卡片那个位置,同一副外壳;海报的位置换成一块写着月份的牌子,一道光慢慢扫过去,标题上一盏小灯在闪 ——
   2026-09-30 他要的「敬请期待的感觉」。只给还没办的地方用:办完了的城市 / 格子调暗、点不了(.is-past,见下面) */
.map-soon {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--map-surface);
  box-shadow: 0 16px 40px rgb(15 33 38 / 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}
.map-next.is-soon .map-soon { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.25s, visibility 0s; }
.map-next.no-promo:not(.is-soon) { display: none; } /* 一场宣传中的都没有、也没在看哪里:不留一块空着的占位 */
.map-soon__tile {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  overflow: hidden;
  border: 1.5px dashed rgb(var(--em-glow) / 0.55);
  border-radius: 8px;
  background: linear-gradient(145deg, rgb(var(--em-glow) / 0.16), rgb(var(--em-glow) / 0.04));
  color: var(--em-ink);
  text-align: center;
}
.map-soon__mon { font-family: var(--font-display); font-size: 38px; line-height: 1; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.map-soon__yr { margin-top: 8px; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0.22em; color: var(--em-muted); font-variant-numeric: lining-nums; }
.map-soon__tile::after { /* 扫过牌子的那道光 */
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.8), transparent);
  transform: translateX(-130%) skewX(-18deg);
  animation: map-soon-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes map-soon-shine {
  0%, 50% { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(330%) skewX(-18deg); }
}
.map-soon__text { min-width: 0; }
.map-soon__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--em-ink);
}
.map-soon__beacon { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--em-pin); }
.map-soon__beacon::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--em-pin); border-radius: 50%; animation: map-ping 1.6s ease-out infinite; }
.map-soon__title { margin-top: 2px; font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 500; color: var(--em-text); }
.map-soon__line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.map-soon__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: 14px; line-height: 1.35; font-weight: 700; color: var(--em-text); font-variant-numeric: lining-nums; }
.map-soon__note { margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--em-muted); }
.map-soon__notify { border: 0; font-family: inherit; cursor: pointer; }

/* 有 Coming soon 卡片时(脚本加 js-soon),日期卡片不再弹出:卡片里都写了。点亮的那座城旁边写上名字 */
.event-map.js-soon .map-tip { display: none; }
.event-map.js-soon.is-exploring .map-pin.is-open .map-pin__label { opacity: 1; }
/* 默认状态下,下一站的城市名写在它的标签里,点旁边自己的城市名就不重复 */
.event-map:not(.is-exploring) .map-pin.is-next .map-pin__label { opacity: 0; }

/* 进视口才画航线:脚本按真实长度把虚线间隔和偏移设成整条线长(线藏起来),is-drawn 时偏移归零 = 画出来;
   小飞机骑在线头上(js/site.js),落地时这一站的点弹出来、标签浮上来。
   过渡只挂在 is-drawn 上:挂在 js-draw 上的话,脚本一接管线会先倒着擦掉、点先缩下去。
   落地后脚本加 is-landed,去掉那 1.3 / 1.5 秒的延迟 —— 否则以后每次从别的城市回来,点和标签都要等一秒多才出来 */
.js-draw.is-drawn .map-route > path { transition: stroke-dashoffset var(--fly, 1.6s) var(--ease-float); }
.js-draw:not(.is-drawn) .map-pin.is-next::before { transform: scale(0); transition: none; }
.js-draw:not(.is-drawn) .map-pin.is-next::after { animation: none; }
.js-draw:not(.is-drawn) .map-stop--next { opacity: 0; transition: none; }
/* --fly = 这一趟飞多久(js/site.js 按航线长短设,默认 1.6 秒);点在飞到八成时弹出、标签在九成多浮上来 */
.js-draw.is-drawn:not(.is-landed) .map-pin.is-next::before { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--fly, 1.6s) * 0.81), background-color 0.25s, box-shadow 0.25s, opacity 0.25s; }
.js-draw.is-drawn:not(.is-landed) .map-stop--next { transition: opacity 0.35s calc(var(--fly, 1.6s) * 0.94), visibility 0s; }
/* 轮播换下一场:先把这一场的卡片、标签、航线淡掉(is-switching,0.3 秒),再从这一场的城市把航线画到下一场;
   卡片等飞机快落地才浮上来(is-flying 去掉时走 .map-next 自己的 0.25 秒过渡) */
.event-map.is-switching .map-next,
.event-map.is-switching .map-stop,
.event-map.is-switching .map-route { opacity: 0; transition: opacity 0.3s; }
.event-map.is-flying .map-next { opacity: 0; transform: translateY(8px); transition: none; }

/* 区块头:宣传语 + 标题 + 提示,在地图上面(地图区自己是一个白底区块,不再压在大图上) */
.event-map__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 30px;
}
.event-map__eyebrow {
  flex: 0 0 100%;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--em-ink);
}
.event-map__title {
  font-family: var(--font-display);
  font-size: clamp(26px, calc(2.36 * var(--vw)), 34px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.event-map__years { color: var(--em-ink); }
.event-map__hint { font-size: 14px; line-height: 1.4; color: var(--em-muted); }
.event-map__all { margin-left: auto; }

/* 时间线:图例一列 + 每月一列。四行(月份 / GCS / 轴线 / GCSx)用 subgrid 在各月之间对齐,
   轴线由每一列的 .map-tl__tick 各画一段拼成 */
.event-map__timeline { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--em-line); }
.map-tl {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 76px;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 22px auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.map-tl > li {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  justify-items: center;
  padding: 6px 4px 10px;
  border-radius: 10px;
  text-align: center;
}
.map-tl > .map-tl__legend { justify-items: start; padding-left: 0; }
.map-tl__name { padding-bottom: 6px; font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* GCS 一行、GCSx 一行,各自是一个可选的格子:在上面那行选城市不影响下面那行 */
.map-tl__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-inline: 5px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 17px;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.map-tl__row--gcs { align-self: end; padding-bottom: 6px; }
.map-tl__row--gcsx { align-self: start; padding-top: 6px; color: var(--em-muted); }
.map-tl__row[data-cities] { cursor: pointer; }
.map-tl__legend .map-tl__row { align-items: flex-start; padding-inline: 0; }
.map-tl__tick {
  position: relative;
  justify-self: stretch;
  margin-inline: -4px;
  background: linear-gradient(var(--em-line), var(--em-line)) center / 100% 1px no-repeat;
}
.map-tl__legend .map-tl__tick { margin-left: 0; }
.map-tl__tick::before { /* 每个月在轴线上的小圆点 */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--em-bg);
  box-shadow: inset 0 0 0 2px var(--em-muted);
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.map-tl__legend .map-tl__tick::before { content: none; }
.map-tl > li:last-child .map-tl__tick::after { /* 轴线末端的箭头 */
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 8px;
  height: 10px;
  margin-top: -5px;
  background: var(--em-line);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.map-tl__ev { transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.map-tl__ev--gcs { padding: 2px 8px; white-space: nowrap; border: 1px solid var(--em-line); border-radius: 12px; }
.map-tl__month { transition: opacity 0.2s; }
.map-tl__month.is-past { opacity: 0.5; }
/* 办完了的格子同样点不了;所在那个月还有别的格子能点时,只把这一格调暗(整列都过去了就跟着整列一起暗,不再叠一层) */
.map-tl__row.is-past { cursor: default; pointer-events: none; }
.map-tl__month:not(.is-past) .map-tl__row.is-past { opacity: 0.5; }
.map-tl__row:focus-visible { outline: 2px solid var(--em-pin); outline-offset: 0; }
.map-tl__row.is-lit { background: rgb(var(--em-glow) / 0.12); box-shadow: inset 0 0 0 1px rgb(var(--em-glow) / 0.35); }
.map-tl__month:has(.map-tl__row.is-lit) { opacity: 1; }
.map-tl__month:has(.map-tl__row.is-lit) .map-tl__tick::before { background: var(--em-pin); box-shadow: 0 0 0 4px rgb(var(--em-glow) / 0.22); transform: scale(1.25); }
.map-tl.has-lit .map-tl__month:not(:has(.map-tl__row.is-lit)) { opacity: 0.35; }
.map-tl__ev.is-lit { color: var(--em-ink); }
.map-tl__ev--gcs.is-lit { border-color: var(--em-pin); background: rgb(var(--em-glow) / 0.12); }

/* 真有悬停的设备:脚本没跑时也能靠 :hover 看日期卡片。触屏上 :hover 会粘住,所以圈在这里面 */
@media (hover: hover) {
  .map-pin:hover { z-index: 3; }
  .map-pin:hover::before {
    transform: scale(1.3);
    background: var(--em-pin);
    box-shadow: 0 0 0 3px var(--em-bg), 0 0 0 5px rgb(var(--em-glow) / 0.35), 0 0 18px 6px rgb(var(--em-glow) / 0.3);
  }
  .map-pin:hover::after { animation: map-ping 1.6s ease-out infinite; }
  .map-pin:hover .map-pin__label { opacity: 0; }
  .map-pin:hover .map-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-1 * var(--x)), 0);
    transition: opacity 0.18s, transform 0.18s;
  }
  .map-tl__row[data-cities]:hover { background: rgb(var(--em-glow) / 0.1); }
  .map-tl__month:has(.map-tl__row[data-cities]:hover) .map-tl__tick::before { background: var(--em-pin); transform: scale(1.25); }
  .map-next__btn:hover { background: var(--map-btn-hover); }
  .map-next__btn:hover::after,
  .event-map__all:hover::after { transform: translateX(3px); }
  .map-next__more:hover,
  .event-map__all:hover { color: var(--em-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin::after { animation: none !important; }
  .map-soon__tile::after,
  .map-soon__beacon::after { display: none; }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 767px) {
  /* 活动地图:下一站卡片排到地图下面;点和线加粗(底图缩到手机宽,1 单位只剩 0.3px);时间线横向滑动 */
  .event-map { padding-block: 44px 56px; }
  .map-pin { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .map-pin::before { inset: 3px; }
  .map-pin__label { display: none; } /* 地图只有 390 宽,靠边的城市名(旧金山写在点左边)会被切掉;下一站的名字卡片里有,点一下出日期卡片 */
  .map-route__line { stroke-width: 5; }
  .map-route__glow { stroke-width: 16; }
  .map-stop { display: none; } /* 同上:地图太小挂不下;下一站的信息在下面的卡片里 */
  .map-next { position: static; width: auto; margin-top: 14px; }
  .map-next > * { align-self: start; } /* 排在地图下面:短的那张贴着地图,空位留在下面(Coming soon 卡片也在这一格,换过去下面的内容不跳) */
  .map-next__poster,
  .map-soon__tile { width: 96px; height: 96px; }
  .map-soon__mon { font-size: 32px; }
  .event-map.is-exploring:not(.js-soon) .map-next { visibility: visible; opacity: 0.35; transform: none; }
  .event-map__intro { margin-bottom: 20px; }
  .event-map__all { margin-left: 0; }
  .event-map__timeline { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; }
  .map-tl { min-width: 860px; }

  /* 大图:手机上照片在上、文字接在下面(文字压在照片上会挡住 CES 立体大字)。
     照片底边渐隐成同色的深蓝黑,文字从渐隐处开始,不出现一条硬边 */
  .hero { height: auto; display: flex; flex-direction: column; background: rgb(var(--night)); }
  .hero__bg { -webkit-mask-image: none; mask-image: none; } /* 手机上照片在上、文字在下,不做淡出 */
  .hero::before { display: none; }
  .hero__bg { position: relative; inset: auto; height: calc(var(--header-h) + 260px); object-position: 78% 100%; }
  .hero::after {
    background: linear-gradient(180deg,
      rgb(var(--night) / 0.62) 0, rgb(var(--night) / 0.48) 90px, rgb(var(--night) / 0) 190px,
      rgb(var(--night) / 0) calc(var(--header-h) + 200px), rgb(var(--night)) calc(var(--header-h) + 260px));
  }
  .hero__body { margin-top: -32px; padding-top: 0; padding-bottom: 48px; }
  .hero__title { margin-left: 0; padding-left: 16px; }
  .hero__meta { padding-left: 19px; }
  .hero__actions { margin-top: 28px; padding-left: 19px; }

  .about { padding-block: 72px; }
  .about__grid { grid-template-columns: 1fr; row-gap: 24px; }
  .about__title { margin-top: 0; max-width: none; }
  .about__rule { width: 64px; height: 2px; }
  .about__text { margin-left: 0; }

  .pillars__list { grid-template-columns: repeat(2, 1fr); row-gap: 40px; padding-block: 56px; }

  .how { padding-block: 72px; }
  .how__intro { grid-template-columns: 1fr; row-gap: 32px; }
  .how__intro-text { padding-top: 0; }
  .how__title { margin-top: 56px; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; }
}

@media (max-width: 640px) {
  .hero__meta { font-size: 14px; letter-spacing: 0.1em; }
  .pillars__label { font-size: 20px; line-height: 24px; min-height: 72px; }
}