@charset "utf-8";

/* ═══════════════════════════════════════════════════════════════════════
   niuzh · 光刻纪元
   0 · DESIGN TOKENS  —  唯一的真理来源。所有颜色 / 间距 / 字号 / 动效
        均引用本层变量；组件层不得出现裸值。
   ═══════════════════════════════════════════════════════════════════════ */

/* 可插值的颜色通道，使「冷 → 暖」的环境切换成为一次真实的颜色过渡。
   注意：必须是 <color> —— 早期版本用 <number> 会让 rgba(var(--glow-a), .3)
   展开成非法的 rgba(108, .3)，整条光晕静默失效。 */
@property --glow-a { syntax: "<color>"; inherits: true; initial-value: #6c5ce7; }
@property --glow-b { syntax: "<color>"; inherits: true; initial-value: #22d3ee; }
@property --glow-c { syntax: "<color>"; inherits: true; initial-value: #d8b8e8; }
@property --gilt-str { syntax: "<number>"; inherits: true; initial-value: 0.3; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #e8e9f0; }

:root {
  /* ── 基底 ────────────────────────────────────────────────────────── */
  --void:      #05060a;
  --indigo:    #0b1024;
  --indigo-lo: #080c1a;

  /* ── 光刻色 ──────────────────────────────────────────────────────── */
  --violet:      #6c5ce7;
  --violet-lit:  #a78bfa;
  --cyan:        #22d3ee;
  --gilt:        #d9b76a;

  /* ── 墨色（正文 72% 于近黑底上 ≈ 8.6:1）─────────────────────────── */
  --ink:        #e8e9f0;
  /* 双声明渐进增强：不支持 color-mix 时回落到等效 rgba */
  --ink-1: rgba(232, 233, 240, .72);                              /* 正文 · 8.6:1 */
  --ink-1: color-mix(in srgb, var(--ink) 72%, transparent);
  --ink-2: rgba(232, 233, 240, .55);                              /* 次级 / 微标签 · 5.2:1 */
  --ink-2: color-mix(in srgb, var(--ink) 55%, transparent);
  --ink-orn: rgba(232, 233, 240, .38);                            /* 仅装饰：细线、序号分隔符 */
  --ink-orn: color-mix(in srgb, var(--ink) 38%, transparent);

  /* ── 线条 ────────────────────────────────────────────────────────── */
  --rule:       rgba(232, 233, 240, .10);
  --rule-soft:  rgba(232, 233, 240, .055);
  --rule-hard:  rgba(232, 233, 240, .18);

  /* ── 面板 ────────────────────────────────────────────────────────── */
  /* 经 --glow-a 取色，故点火后与全场一同由冷转暖（此前三处硬写
     rgba(11,16,36,…) 的面板是唯一不响应 is-warm 的图层）。 */
  --panel: linear-gradient(180deg,
    color-mix(in srgb, var(--glow-a) 9%, var(--void)),
    color-mix(in srgb, var(--void) 84%, transparent));
  --panel-flat: color-mix(in srgb, var(--glow-a) 5%, var(--indigo));

  /* ── 环境通道（可动画；一律经 color-mix 取透明度）───────────── */
  --glow-a: #6c5ce7;   /* 冷：lithography violet */
  --glow-b: #22d3ee;   /* 冷：machine cyan */
  --glow-c: #d8b8e8;   /* 主光束 */
  --gilt-str: .30;

  /* ── 字体 ────────────────────────────────────────────────────────── */
  --serif-cn: "Songti SC", "STSong", "SimSun", "Source Han Serif SC",
              "Noto Serif CJK SC", "Songti TC", "STZhongsong", serif;
  --serif-la: "Playfair Display", "Didot", "Bodoni MT", "Bodoni 72",
              Georgia, "Times New Roman", serif;
  /* 拉丁高对比衬线在前、CJK 宋体在后：同一串文字里两种字符各取所需 */
  --serif-mix: "Playfair Display", "Didot", "Bodoni MT", "Bodoni 72",
               Georgia, "Times New Roman",
               "Songti SC", "STSong", "SimSun", "Source Han Serif SC",
               "Noto Serif CJK SC", "Songti TC", "STZhongsong", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
          Arial, sans-serif;

  /* ── 字号阶梯（流体，360 → 2560）────────────────────────────────── */
  --t-orn:  clamp(.62rem, .58rem + .16vw, .72rem);   /* 微标签 / 序号 */
  --t-0:    clamp(.94rem, .90rem + .22vw, 1.06rem);   /* 正文 */
  --t-1:    clamp(1.06rem, .98rem + .42vw, 1.28rem);  /* 引文 */
  --t-2:    clamp(1.30rem, 1.05rem + 1.15vw, 2.05rem);
  --t-3:    clamp(1.70rem, 1.20rem + 2.30vw, 3.20rem);
  --t-4:    clamp(2.10rem, 1.30rem + 3.70vw, 5.00rem);
  --t-hero: clamp(3.00rem, 1.50rem + 14.0vw, 13.00rem);
  /* 遗训共 8 字（含「」），永不折行：8 × 1.1em 必须容于最窄容器。
     320px 时 8.8em × 30px ≈ 264px < 可用 280px。 */
  --t-creed:clamp(1.55rem, .92rem + 4.40vw, 5.50rem);

  /* ── 间距（8px 基准）────────────────────────────────────────────── */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --s-band: clamp(5.5rem, 13vh, 10.5rem);   /* 版块纵向留白 */

  /* ── 圆角 / 阴影 ────────────────────────────────────────────────── */
  --r-sm: 2px; --r-md: 3px; --r-lg: 6px;
  --lift: 0 24px 60px -30px rgba(0, 0, 0, .9);

  /* ── 动效 ────────────────────────────────────────────────────────── */
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --d-reveal: 900ms;
  --d-soft:   320ms;
  --d-amb:    1600ms;
  --stagger:  110ms;

  /* ── 布局 ────────────────────────────────────────────────────────── */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw:    82rem;
  --bar-h:   3.5rem;
  --tl-gut:  3.5rem;
  --tl-node-y: 1.75rem;
}

/* 冷 → 暖：一次点火，全场换气 */
html.is-warm {
  --glow-a: #d9a253;
  --glow-b: #e08a3c;
  --glow-c: #f0c489;
  --gilt-str: .66;
  --ink: #f1ebe1;
}
html {
  color-scheme: dark;
  background: var(--void);
  transition:
    --glow-a var(--d-amb) var(--ease-soft),
    --glow-b var(--d-amb) var(--ease-soft),
    --glow-c var(--d-amb) var(--ease-soft),
    --gilt-str var(--d-amb) var(--ease-soft),
    --ink var(--d-amb) var(--ease-soft);
}

/* ═══════════════════════════════════════════════════════════════════════
   1 · 基础
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + var(--s-4));
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--void);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* 禁则处理：句读点不得置于行首。text-wrap: pretty 只管孤行，
     管不了词内断行 —— 那交给下面 .nb 标记的原子单位。 */
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

/* 不可断的词内单位。中文没有词间空格，浏览器只按字断行，
   会把「零点几微米」「一台一台」这类叠词与量词切在行尾行首之间。
   凡被实测断开过的单位，一律以 .nb 包住。 */
.nb { white-space: nowrap; }

/* 作者样式会盖过 UA 的 [hidden]{display:none}，须显式声明，
   否则 script.js 的 btn.hidden = true 兜底不会生效。 */
[hidden] { display: none !important; }

h1, h2, h3, p, dl, dd, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

::selection {
  background: color-mix(in srgb, var(--glow-a) 34%, transparent);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: fixed;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 90;
  transform: translateY(-160%);
  padding: var(--s-2) var(--s-4);
  background: var(--indigo);
  border: 1px solid var(--rule-hard);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--t-orn);
  letter-spacing: .12em;
  text-decoration: none;
  transition: transform var(--d-soft) var(--ease);
}
.skip:focus { transform: translateY(0); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ═══════════════════════════════════════════════════════════════════════
   2 · 环境层（纯 CSS 渐变，无任何图像资源）
   ═══════════════════════════════════════════════════════════════════════ */

.atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.atmos > * { position: absolute; inset: 0; }

.atmos__glow {
  background:
    radial-gradient(128% 76% at 50% -14%,
      color-mix(in srgb, var(--glow-a) 22%, transparent), transparent 62%),
    radial-gradient(86% 58% at 8% 26%,
      color-mix(in srgb, var(--glow-b) 9%, transparent), transparent 66%),
    radial-gradient(70% 52% at 100% 78%,
      color-mix(in srgb, var(--glow-c) 9%, transparent), transparent 68%),
    linear-gradient(180deg, var(--indigo-lo) 0%, var(--void) 46%, var(--void) 100%);
}

.atmos__grid {
  background-image:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(128% 92% at 50% 4%, #000 8%, rgba(0,0,0,.35) 48%, transparent 82%);
  mask-image: radial-gradient(128% 92% at 50% 4%, #000 8%, rgba(0,0,0,.35) 48%, transparent 82%);
}

.atmos__grain {
  background-image:
    repeating-linear-gradient(137deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(41deg,  rgba(255,255,255,.010) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(91deg,  rgba(255,255,255,.008) 0 1px, transparent 1px 7px);
}

.atmos__scan {
  background-image: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.26) 0 1px, transparent 1px 4px);
  opacity: .48;
}

.atmos__vignette {
  background: radial-gradient(126% 96% at 50% 42%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* 画布：光刻场 */
.field {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .55;
}

main, .masthead, .foot { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════════════
   3 · 顶栏
   ═══════════════════════════════════════════════════════════════════════ */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--d-soft) var(--ease-soft),
    border-color var(--d-soft) var(--ease-soft),
    backdrop-filter var(--d-soft) var(--ease-soft),
    -webkit-backdrop-filter var(--d-soft) var(--ease-soft);
}
.masthead.is-scrolled {
  background-color: rgba(5, 6, 10, .58);
  border-bottom-color: var(--rule);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.masthead__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__mark {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gilt);
  box-shadow: 0 0 calc(6px * var(--gilt-str)) rgba(217, 183, 106, .9);
  transition: box-shadow var(--d-amb) var(--ease-soft);
}
.brand__name {
  font-family: var(--serif-la);
  font-size: 1.02rem;
  letter-spacing: .22em;
  line-height: 1;
}

.nav { margin-left: auto; min-width: 0; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, var(--s-5));
}
.nav__link {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  padding: var(--s-1) var(--s-1);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d-soft) var(--ease-soft);
}
.nav__link:hover { color: var(--ink); }
.nav__num {
  font-size: var(--t-orn);
  letter-spacing: .1em;
  color: var(--ink-orn);
  transition: color var(--d-soft) var(--ease-soft);
}
.nav__link:hover .nav__num { color: var(--gilt); }
.nav__zh {
  font-family: var(--serif-cn);
  font-size: clamp(.72rem, .68rem + .18vw, .82rem);
  letter-spacing: .18em;
  margin-right: -.18em;
}

.hum {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  transition:
    color var(--d-soft) var(--ease-soft),
    border-color var(--d-soft) var(--ease-soft),
    background-color var(--d-soft) var(--ease-soft);
}
.hum:hover { color: var(--ink); border-color: var(--rule-hard); }
.hum__icon {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.hum__spk { fill: currentColor; stroke-linejoin: round; }
.hum__wave, .hum__mute { opacity: 0; transition: opacity var(--d-soft) var(--ease-soft); }
.hum.is-on { color: var(--violet-lit); border-color: rgba(167, 139, 250, .4); }
.hum.is-on .hum__wave { opacity: .85; }
.hum.is-on .hum__mute { opacity: 0; }
.hum:not(.is-on) .hum__mute { opacity: .7; }
.hum__label {
  font-size: var(--t-orn);
  letter-spacing: .18em;
  margin-right: -.18em;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════════════
   4 · 通用零件
   ═══════════════════════════════════════════════════════════════════════ */

.eyebrow, .micro, .index, .sechead__en, .stat__en, .card__by,
.ignite__hint, .epilogue__label, .cue__text, .foot__note {
  font-family: var(--sans);
  font-size: var(--t-orn);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--ink-2);
  margin-right: -.34em;
}
.eyebrow__txt {
  font-family: var(--serif-mix);
  font-weight: 400;
  font-size: clamp(.72rem, .64rem + .34vw, .92rem);
  letter-spacing: .34em;
  margin-right: -.34em;
  color: var(--ink);
}
.index {
  display: flex;
  align-items: baseline;
  gap: .3em;
  letter-spacing: .3em;
  color: var(--gilt);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}
.index__now { font-size: calc(var(--t-orn) * 1.1); }
.index__sep { color: var(--ink-orn); }
.index__all { color: var(--ink-2); }

.sechead { margin-bottom: var(--s-9); }
.sechead__zh {
  font-family: var(--serif-cn);
  font-size: var(--t-3);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .3em;
  margin-right: -.3em;
  color: var(--ink);
}
.sechead__en {
  margin-top: var(--s-3);
}
.sechead__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: var(--s-5);
  background: linear-gradient(to right, var(--rule-hard), var(--rule-soft) 62%, transparent);
}
.sechead--center { text-align: center; }
.sechead--center .index { justify-content: center; }
.sechead--center .sechead__rule {
  background: linear-gradient(to right, transparent, var(--rule-hard) 38%, var(--rule-hard) 62%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   5 · 序章 / Hero
   ═══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* 底部留出提示条约 4.5rem：绝对定位的 cue 永不压到 stat，
     同时让整屏在 1280×900 内完整收束 */
  padding-block: calc(var(--bar-h) + var(--s-7)) calc(var(--s-7) + 4rem);
  overflow: hidden;
}
.hero__wrap {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
}

.hero__beam {
  position: absolute;
  top: -6%;
  left: 50%;
  width: min(46vw, 34rem);
  height: 112%;
  transform: translateX(-50%);
  pointer-events: none;
  /* 椭圆径向：两侧与上下都自然衰减，不留硬边 */
  background: radial-gradient(52% 62% at 50% 44%,
    color-mix(in srgb, var(--glow-c) 15%, transparent), transparent 74%);
  animation: beam-drift 14s var(--ease-soft) infinite alternate;
}
@keyframes beam-drift {
  from { opacity: .5; transform: translateX(-52%) scaleY(.97); }
  to   { opacity: 1;  transform: translateX(-48%) scaleY(1.03); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-bottom: var(--s-6);
}
.eyebrow__tick {
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gilt));
}
.hero__title {
  font-family: var(--serif-la);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: .92;
  letter-spacing: .07em;
  margin-right: -.07em;
  color: var(--ink);
  text-shadow: 0 0 70px color-mix(in srgb, var(--glow-a) 40%, transparent);
  white-space: nowrap;
}

.hero__sub {
  font-family: var(--serif-cn);
  font-size: var(--t-2);
  line-height: 1.6;
  letter-spacing: .22em;
  margin-right: -.22em;
  margin-top: var(--s-5);
  color: var(--ink);
  text-wrap: balance;
}

.hero__rule {
  width: min(22rem, 62vw);
  height: 1px;
  margin-block: var(--s-5) var(--s-4);
  background: linear-gradient(to right, transparent, var(--rule-hard) 45%, var(--gilt) 50%, var(--rule-hard) 55%, transparent);
  opacity: .8;
}

.hero__lead {
  max-width: 32rem;
  font-family: var(--serif-cn);
  font-size: var(--t-1);
  line-height: 2.05;
  letter-spacing: .06em;
  color: var(--ink-1);
  /* 短段落用 balance 均衡各行长度，杜绝「动词。」这类三字孤行 */
  text-wrap: balance;
}

.stats {
  /* 两块牌位等宽 —— flex + 内容撑开会因「光刻 · 世界第一」长于
     「遗志 · 未竟」而长短不一，读作失误而非决定 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: 32rem;
  margin: var(--s-7) auto 0;
}
.stat {
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel);
  text-align: center;
}
.stat__key {
  font-family: var(--serif-cn);
  font-size: var(--t-0);
  font-weight: 400;
  letter-spacing: .26em;
  margin-right: -.26em;
  color: var(--ink);
  line-height: 1.7;
}
.stat__val { margin: var(--s-2) 0 0; }
.stat__en {
  letter-spacing: .3em;
}

.cue {
  position: absolute;
  left: 50%;
  bottom: var(--s-4);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-4);
  text-decoration: none;
  color: var(--ink-2);
}
.cue__text { transition: color var(--d-soft) var(--ease-soft); }
.cue:hover .cue__text { color: var(--ink); }
.cue__line {
  width: 1px;
  height: clamp(1.75rem, 5vh, 3rem);
  background: linear-gradient(to bottom, var(--gilt), transparent);
  transform-origin: top;
  animation: cue-fall 2.8s var(--ease-soft) infinite;
}
@keyframes cue-fall {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  45%      { transform: scaleY(1);   opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   6 · 历程 / 时间线
   ═══════════════════════════════════════════════════════════════════════ */

.section {
  padding-block: var(--s-band);
  position: relative;
  scroll-margin-top: calc(var(--bar-h) + var(--s-4));
}
.section + .section { border-top: 1px solid var(--rule-soft); }

.tl { position: relative; }
.tl__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-gut) 1fr;
  padding-block: var(--s-7) var(--s-8);
}
.tl__item:first-child { padding-top: 0; }

.tl__stem,
.tl__node,
.tl__tick {
  position: absolute;
  left: calc(var(--tl-gut) / 2);
}

/* 竖向引线：自上而下点亮 */
.tl__stem {
  top: 0;
  width: 1px;
  height: var(--tl-node-y);
  margin-left: -.5px;
  background: linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--glow-c) 45%, transparent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-reveal) var(--ease);
}
.tl__item:first-child .tl__stem { display: none; }

/* 节点：休眠的灰 → 点亮的金 */
.tl__node {
  top: calc(var(--tl-node-y) - 3.5px);
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--rule-hard);
  box-shadow: 0 0 0 4px var(--void);
  transition:
    background-color var(--d-reveal) var(--ease),
    box-shadow var(--d-reveal) var(--ease),
    transform var(--d-reveal) var(--ease);
}

/* 横向连接线：左 → 右填充 */
.tl__tick {
  top: var(--tl-node-y);
  width: calc(var(--tl-gut) / 2 - 3.5px);
  height: 1px;
  background: linear-gradient(to right, rgba(217, 183, 106, .85), rgba(217, 183, 106, .18));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-reveal) var(--ease);
}

.tl__item.is-lit .tl__stem { transform: scaleY(1); }
.tl__item.is-lit .tl__tick { transform: scaleX(1); }
.tl__item.is-lit .tl__node {
  background: var(--gilt);
  box-shadow:
    0 0 0 4px var(--void),
    0 0 14px rgba(217, 183, 106, .85),
    0 0 34px rgba(217, 183, 106, .38);
}
.tl__item.is-lit .tl__title { color: var(--ink); }

/* 节点 / 引线为绝对定位，不生成网格项 —— 正文必须显式落进第二列，
   否则会被自动放入 56px 的节点槽里 */
.tl__body { grid-column: 2; min-width: 0; max-width: 38rem; }

.micro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.micro > * { flex: 0 0 auto; }
.micro__ord {
  font-family: var(--serif-cn);
  font-size: var(--t-orn);
  letter-spacing: .3em;
  margin-right: -.3em;
  text-transform: none;
  color: var(--gilt);
  transition: color var(--d-reveal) var(--ease);
  opacity: .78;
}
.tl__item.is-lit .micro__ord { opacity: 1; }
.micro__sep {
  width: 1.5rem;
  height: 1px;
  background: var(--rule-hard);
}
.micro__en { color: var(--ink-2); }

.tl__title {
  font-family: var(--serif-cn);
  font-weight: 400;
  font-size: var(--t-2);
  line-height: 1.4;
  letter-spacing: .16em;
  margin-right: -.16em;
  color: var(--ink-2);
  transition: color var(--d-reveal) var(--ease);
  text-wrap: balance;
}
.tl__text {
  margin-top: var(--s-4);
  font-size: var(--t-0);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--ink-1);
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════════════
   7 · 遗训 / The Creed
   ═══════════════════════════════════════════════════════════════════════ */

.creed { overflow: hidden; }
.creed__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 46% at 50% 50%,
    color-mix(in srgb, var(--glow-a) 14%, transparent), transparent 72%);
}

.creed__wrap { position: relative; }

.creed__line {
  font-family: var(--serif-cn);
  font-weight: 400;
  font-size: var(--t-creed);
  line-height: 1.35;
  letter-spacing: .1em;
  margin-right: -.1em;
  color: var(--ink);
  text-align: center;
  /* 这是一句遗训，不是一段文章：八个字必须同处一行。
     .ch 的 inline-block 会把每个字变成原子盒，令禁则彻底失效，
     再叠加 balance，390px 上「」」」」」」」」」」」被甩到下一行。 */
  white-space: nowrap;
  text-shadow: 0 0 60px color-mix(in srgb, var(--glow-a) 36%, transparent);
}
.creed__line .ch {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(.16em);
  transition:
    opacity 520ms var(--ease),
    filter 520ms var(--ease),
    transform 520ms var(--ease);
  transition-delay: calc(var(--i, 0) * 78ms);
}
.creed__line.is-typing .ch { opacity: 1; filter: blur(0); transform: none; }

.creed__caret {
  display: none;
  width: 1px;
  height: .82em;
  margin-left: .12em;
  vertical-align: -.06em;
  background: var(--gilt);
  box-shadow: 0 0 10px rgba(217, 183, 106, .8);
  animation: caret 1.05s steps(1, end) infinite;
}
.creed__line.is-typing .creed__caret { display: inline-block; }
.creed__line.is-done .creed__caret {
  animation: none;
  opacity: 0;
  /* 归零宽度：否则光标残留的 1px + .12em 会把已排好的居中行推向一侧，
     使落笔后的画面与静态渲染不等位。 */
  width: 0;
  margin-left: 0;
  transition: opacity 700ms var(--ease-soft), width 0s linear 700ms,
              margin-left 0s linear 700ms;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.creed__by {
  margin-top: var(--s-6);
  text-align: center;
  font-family: var(--serif-la);
  font-size: var(--t-1);
  letter-spacing: .2em;
  color: var(--ink-2);
}
.creed__lede {
  margin: var(--s-9) auto 0;
  max-width: 30rem;
  text-align: center;
  font-family: var(--serif-cn);
  font-size: var(--t-1);
  line-height: 2.05;
  letter-spacing: .08em;
  color: var(--ink-1);
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════════════
   8 · 追思 / Tributes
   ═══════════════════════════════════════════════════════════════════════ */

.cards {
  /* 恰好三张，auto-fit 会在中段留下 2+1 的孤行空位 —— 改用显式列数 */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-5);
  padding: var(--s-7) var(--s-6) var(--s-6);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel);
  /* 无链接、无按钮、无处理器 —— 故不设 hover：
     会抬升却点不动的卡片，是在骗人。 */
}
.card__glyph {
  font-family: var(--serif-la);
  font-size: 3.4rem;
  line-height: .6;
  height: .6em;
  color: var(--gilt);
  opacity: .5;
}
.card__quote p {
  font-family: var(--serif-cn);
  font-size: var(--t-1);
  line-height: 2;
  letter-spacing: .05em;
  color: var(--ink);
  text-wrap: pretty;
}
.card__by {
  /* 三张卡的引文行数不等 —— 落款一律贴底，基线才整齐 */
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--serif-cn);
  font-size: var(--t-orn);
  letter-spacing: .2em;
  text-transform: none;
  color: var(--ink-2);
  margin-right: -.2em;
}

/* ═══════════════════════════════════════════════════════════════════════
   9 · 尾声 / Epilogue + 献烛
   ═══════════════════════════════════════════════════════════════════════ */

.epilogue { overflow: hidden; }
.epilogue__glow {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: min(64rem, 96vw);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side,
    color-mix(in srgb, #d9b76a calc(16% * var(--gilt-str)), transparent),
    color-mix(in srgb, var(--glow-c) 5%, transparent) 52%, transparent 76%);
  opacity: .6;
  transition: opacity var(--d-amb) var(--ease-soft);
}
html.is-warm .epilogue__glow { opacity: 1; }

.epilogue__wrap {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}
.epilogue__label {
  font-family: var(--serif-cn);
  font-size: var(--t-orn);
  letter-spacing: .6em;
  margin-right: -.6em;
  text-transform: none;
  color: var(--gilt);
  opacity: .9;
}
.epilogue__body {
  max-width: 30rem;
  margin-top: var(--s-4);
  font-family: var(--serif-cn);
  font-size: var(--t-1);
  line-height: 2.05;
  letter-spacing: .07em;
  color: var(--ink-1);
  text-wrap: pretty;
}

.altar {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  margin-top: var(--s-9);
  padding: var(--s-8) var(--s-5) var(--s-7);
}
.altar__bloom {
  position: absolute;
  left: 50%;
  top: 0;
  width: 30rem;
  height: 30rem;
  transform: translate(-50%, -34%) scale(.35);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(255, 196, 116, .3), rgba(226, 140, 58, .1) 46%, transparent 72%);
  opacity: 0;
  transition: opacity 1800ms var(--ease-soft), transform 1800ms var(--ease);
}
html.is-warm .altar__bloom {
  opacity: 1;
  transform: translate(-50%, -34%) scale(1);
}

.candle {
  position: relative;
  display: grid;
  justify-items: center;
  width: 3rem;
  height: 7.5rem;
  align-content: end;
}
.candle__body {
  width: 1.15rem;
  height: 4.6rem;
  border-radius: 3px 3px 2px 2px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.09) 34%, rgba(0,0,0,.32) 100%),
    linear-gradient(180deg, #f0ece1, #c9c3b4);
  box-shadow: var(--lift);
  /* 未点亮时压到半亮：否则这截白蜡烛会比除字标外的一切都亮，
     「点亮」也就失去了亮度意义。点火后由 is-warm 复原。 */
  filter: brightness(.46) saturate(.55);
  transition: filter var(--d-amb) var(--ease-soft);
}
.candle__wick {
  width: 2px;
  height: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), #6b5a3c);
}
.candle__flame {
  position: absolute;
  left: 50%;
  /* 火焰路径只占 viewBox(0 0 24 34) 的 y 0.6–21.4，下方 37% 是空的。
     若让方框底边正好压住灯芯顶端，火苗就会浮在芯上方约 12px 处。
     下移 0.371×方框高（3.85rem−3.4rem×…）使火苗根部真正落在芯上。 */
  bottom: calc(100% - 3.85rem);
  width: 2.4rem;
  height: 3.4rem;
  transform: translateX(-50%) scale(.4);
  transform-origin: bottom center;
  opacity: 0;
  filter: blur(5px);
  transition:
    opacity 900ms var(--ease),
    transform 900ms var(--ease),
    filter 900ms var(--ease);
}
.flame__halo {
  fill: rgba(255, 186, 96, .55);
  filter: blur(3px);
}
.flame__core {
  /* 焰心过白会把整枚火苗压成一个方块；压暖后才读得出外焰的轮廓 */
  fill: #ffd9a0;
  opacity: .8;
}
html.is-warm .candle__flame {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  filter: blur(0);
  animation: flame-live 3.4s var(--ease-soft) infinite alternate;
}
@keyframes flame-live {
  from { transform: translateX(-50%) scale(.96) rotate(-1.1deg); }
  to   { transform: translateX(-50%) scale(1.04) rotate(1.1deg); }
}
html.is-warm .candle__body {
  filter: none;
  box-shadow: var(--lift), 0 0 46px -6px rgba(255, 186, 96, .35);
}

.ignite {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-7);
  background: var(--panel-flat);
  border: 1px solid var(--rule-hard);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition:
    color var(--d-soft) var(--ease-soft),
    border-color var(--d-soft) var(--ease-soft),
    background-color var(--d-soft) var(--ease-soft),
    box-shadow var(--d-soft) var(--ease-soft);
}
.ignite:hover:not(:disabled) {
  border-color: rgba(217, 183, 106, .55);
  background: rgba(217, 183, 106, .07);
}
.ignite__label {
  font-family: var(--serif-cn);
  font-size: var(--t-0);
  letter-spacing: .26em;
  margin-right: -.26em;
  line-height: 1.6;
}
.ignite__hint {
  letter-spacing: .3em;
}
.ignite:disabled {
  cursor: default;
  color: var(--gilt);
  border-color: rgba(217, 183, 106, .32);
  background: rgba(217, 183, 106, .05);
}

.altar__count {
  font-family: var(--serif-cn);
  font-size: var(--t-orn);
  letter-spacing: .3em;
  margin-right: -.3em;
  color: var(--ink-2);
  transition: color var(--d-amb) var(--ease-soft);
}
html.is-warm .altar__count { color: var(--gilt); }

/* ═══════════════════════════════════════════════════════════════════════
   10 · 页脚
   ═══════════════════════════════════════════════════════════════════════ */

.foot {
  border-top: 1px solid var(--rule-soft);
  padding-block: var(--s-8) var(--s-9);
}
.foot__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
}
.foot__mark {
  font-family: var(--serif-la);
  font-size: var(--t-0);
  letter-spacing: .3em;
  margin-right: -.3em;
  color: var(--ink-2);
}
.foot__dot { color: var(--ink-orn); margin-inline: .1em; }
.foot__note {
  font-family: var(--serif-cn);
  letter-spacing: .22em;
  text-transform: none;
  color: var(--ink-2);
  margin-right: -.22em;
}

/* ═══════════════════════════════════════════════════════════════════════
   11 · 进场（opacity + translateY，无旋转无弹跳）
   ═══════════════════════════════════════════════════════════════════════ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--d-reveal) var(--ease),
    transform var(--d-reveal) var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * var(--stagger));
  will-change: opacity, transform;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   12 · 响应式 360 → 2560
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 120rem) {
  :root { --maxw: 88rem; }
}

@media (max-width: 64rem) {
  /* 三张卡在 1024px 以下改单列：两列会留下 2+1 的孤行 */
  .cards { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; }
}

@media (max-width: 30rem) {
  /* 窄到放不下两块等宽牌位时改上下堆叠，避免标题折行 */
  .stats { grid-template-columns: 1fr; }
}

@media (max-width: 60rem) {
  :root { --tl-gut: 2.75rem; }
  .sechead { margin-bottom: var(--s-8); }
  .creed__lede { margin-top: var(--s-7); }
  .altar { margin-top: var(--s-8); }
}

@media (max-width: 48rem) {
  :root { --bar-h: 3.15rem; }
  .masthead__inner { gap: var(--s-2); }
  .nav__list { gap: clamp(.4rem, 1.6vw, var(--s-3)); }
  .brand__name { font-size: .92rem; letter-spacing: .16em; }
  .hero { padding-block: calc(var(--bar-h) + var(--s-6)) calc(var(--s-6) + 4rem); }
  .stats { gap: var(--s-4); }
  .stat { padding: var(--s-3) var(--s-5); }
  .tl__item { padding-block: var(--s-6) var(--s-7); }
  .cards { gap: var(--s-4); }
  .altar { padding-block: var(--s-7) var(--s-6); }
}

@media (max-width: 32.5rem) {
  :root { --tl-gut: 2.25rem; }
  .nav__zh { letter-spacing: .1em; }
  .hum__label { display: none; }
  .hum { padding: var(--s-1) var(--s-2); }
  .hero__title { letter-spacing: .04em; margin-right: -.04em; }
  .cue__text { letter-spacing: .24em; margin-right: -.24em; }
  .eyebrow { letter-spacing: .24em; margin-right: -.24em; }
}

/* 窄屏（≈370–432px）：五个导航项放不进「品牌 + 导览 + 环境音」一行，
   .nav__list 会溢出被压缩的 .nav 盒子并压到环境音按钮下方，
   导致「05 尾声」被遮挡且点击被按钮截获。此处先舍弃序号，保留中文版块名。 */
@media (max-width: 27rem) {
  .nav__num { display: none; }
  .nav__link { gap: 0; }
  /* 纵向加高触控区至约 38px（仍远在 56px 顶栏之内），
     只加高不加宽 —— 加宽会把导航重新推向环境音按钮。 */
  .nav__link { padding-block: .5rem; }
  .masthead__inner { gap: var(--s-3); }
}

/* ≤23rem（368px，含 360px 下限）：中文名缩小而非隐藏。
   绝不可再 display:none —— 与上一级 .nav__num{display:none} 叠加后，
   每个 .nav__link 的两个孩子都会消失，整条导航归零。 */
@media (max-width: 23rem) {
  .nav__list { gap: clamp(.25rem, 1.4vw, .5rem); }
  .nav__link { padding-inline: .15rem; }
  .nav__zh {
    font-size: .66rem;
    letter-spacing: .02em;
    margin-right: -.02em;
  }
  .creed__line { letter-spacing: .04em; margin-right: -.04em; }
}

/* ═══════════════════════════════════════════════════════════════════════
   13 · 减弱动态偏好 —— 优雅地静止
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .tl__stem, .tl__tick { transform: none !important; }
  .tl__node { background: var(--gilt); box-shadow: 0 0 0 4px var(--void), 0 0 16px rgba(217, 183, 106, .6); }
  .creed__line .ch { opacity: 1 !important; filter: none !important; transform: none !important; }
  .creed__caret { display: none !important; }
  .hero__beam, .cue__line { animation: none !important; }
  .cue__line { transform: none !important; opacity: .8; }
}