/* =============================================================================
 * 官网介绍页 · 样式
 * =============================================================================
 * 这一页住在仓库根目录，也就是站点根路径 https://jasper-leung.github.io/no188-gift-web/
 * （游戏本体在 /188js/，所以本仓库不再持有它的构建产物）。
 *
 * 配色取自游戏自己的 UI 变量：纸、墨、朱印三色，再从标题美术里借一点山色（--jade）
 * 和一块「放映厅」用的夜色。
 *
 * 版式按一本书来排：六章，每章一条带页码的细线、一个大写数字（壹贰叁肆伍陆）、
 * 一个标题和一行斜体的外文旁注。正文 12 栏，章号占左边三栏。
 *
 * 字体分三层：
 *   - 中文一律是游戏那份子集化的霞鹜文楷（188UI）
 *   - 标题与数字的拉丁字符走 Instrument Serif——它排在字体栈最前，但 unicode-range
 *     只认拉丁，中文会自己落回文楷；破折号与弯引号也故意不收，免得中文里的「——」
 *     变成一截细短的西文横线
 *   - 小号标注走 IBM Plex Mono；英文版的正文换成 Newsreader（中文页不会下载它）
 *
 * 兼容：评委可能用国产壳浏览器（内核常落后几个大版本），所以这里不用 CSS 嵌套、
 * 不用 :has()、不用容器查询；aspect-ratio / gap / inset 这一档是底线。
 * ============================================================================= */

@font-face {
  font-family: '188UI';
  src: url('fonts/ui.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/latin/instrument-serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+2013, U+2019, U+201C-201D, U+2122;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/latin/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+2013, U+2019, U+201C-201D, U+2122;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/latin/ibm-plex-mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2019, U+2192;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/latin/newsreader.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  --paper: #ede6d6;
  --paper-hi: #f7f3ea;
  --paper-2: #e4dac5;
  --paper-3: #d6c9ad;
  --ink: #1d1a17;
  --ink-2: #4a4238;
  --ink-3: #655b4e;
  --seal: #b4552f;
  --seal-deep: #8f3f20;
  --seal-soft: rgba(180, 85, 47, 0.45);
  --seal-light: #e8936c; /* 深底上的朱色：原色在夜色上对比不够 */
  --jade: #5d7b6c;
  --night: #14110e;
  --night-2: #1f1b17;
  --on-night: #efe7d6;
  --on-night-2: rgba(239, 231, 214, 0.66);
  --on-night-rule: rgba(239, 231, 214, 0.14);
  --rule: rgba(29, 26, 23, 0.12);
  --rule-2: rgba(29, 26, 23, 0.24);

  --f-zh: '188UI', 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', Georgia, serif;
  --f-text: var(--f-zh);
  --f-display: 'Instrument Serif', '188UI', 'Songti SC', 'Noto Serif CJK SC', Georgia, serif;
  --f-mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, '188UI', monospace;

  --wrap: 82rem;
  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  --col-gap: clamp(1rem, 2.4vw, 2rem);
  --nav-h: 4.25rem;
  --radius: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --shadow-1: 0 1px 2px rgba(29, 26, 23, 0.05), 0 12px 32px -18px rgba(29, 26, 23, 0.35);
  --shadow-2: 0 2px 6px rgba(29, 26, 23, 0.05), 0 50px 90px -45px rgba(29, 26, 23, 0.6);

  /* 纸纹：一张 240px 的噪点平铺，透明度压到几乎看不见——有它，大面积纸色才不像塑料 */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .11 0 0 0 0 .09 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light;
}
/* 英文版正文换一款拉丁正文字；中文页不会命中这一条，也就不会去下载 Newsreader */
[data-lang='en'] {
  --f-text: 'Newsreader', '188UI', Georgia, serif;
}

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

/**
 * `hidden` 必须赢过任何 display 规则。
 *
 * UA 样式表里的 `[hidden] { display: none }` 只是**作者样式优先级之下**的一条，
 * 而这一页给 `.btn` 写了 `display: inline-flex`——于是「已经打上 hidden 的
 * 在线试玩按钮」照样显示。症状和「构建没生效」一模一样：按钮该藏却还在。
 * 这条是所有用 hidden 做条件显示的页面的标准写法。
 */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  /* 锚点跳转时给固定导航留位置 */
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: clamp(15.5px, 0.35vw + 14.4px, 17.5px);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
}
[data-lang='en'] body {
  font-size: clamp(16.5px, 0.35vw + 15.2px, 18.5px);
  line-height: 1.6;
}

/* ---------------------------------------------------------------- 语言切换
 * 双语是**两套都写死在 DOM 里**的，不是 JS 填的：JS 关掉、或脚本还没跑到，
 * 页面照样是完整的一页，而不是一片空白。切换只改 <html data-lang>，
 * CSS 决定露哪一套 —— 藏起来的那套 display:none，读屏也不会念两遍。
 * 默认中文：评委与赛事表单都是中文环境。
 *
 * 带 !important 的理由和上面 [hidden] 一样：版面里不少地方要给 .zh/.en 本身
 * 设 display（竖排的碑文、首字下沉），同优先级时后写的会赢，语言就漏出来了。
 */
[data-lang='zh'] .en {
  display: none !important;
}
[data-lang='en'] .zh {
  display: none !important;
}

img,
video,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--seal-deep);
  text-decoration-color: rgba(180, 85, 47, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}
a:hover {
  text-decoration-color: currentColor;
}

/* 文楷只有一个字重：中文的强调靠颜色，不靠假粗体 */
b,
strong {
  font-weight: 400;
}
[data-lang='en'] b,
[data-lang='en'] strong {
  font-weight: 560;
}

code {
  padding: 0.08em 0.36em;
  font-family: var(--f-mono);
  font-size: 0.84em;
  background: rgba(29, 26, 23, 0.06);
  border-radius: 4px;
}

::selection {
  color: var(--paper-hi);
  background: var(--seal);
}

:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5rem;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* 线描图标：全部 24×24、只描边，颜色跟字走 */
.i {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-play {
  fill: currentColor;
  stroke: none;
}

/* 朱印：导航、页脚、站点图标是同一枚 */
.seal {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  font-family: var(--f-display);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--paper-hi);
  background: var(--seal) var(--grain);
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px var(--seal), inset 0 0 0 3px rgba(247, 243, 234, 0.55);
}

/* ---------------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 2.9rem;
  padding: 0 1.3rem;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease),
    box-shadow 0.25s ease;
}
.btn:hover {
  border-color: var(--ink);
  background: rgba(29, 26, 23, 0.04);
}
.btn:active {
  transform: translateY(1px);
}
.btn > .i {
  transition: transform 0.3s var(--ease);
}
.btn:hover > .i {
  transform: translate(2px, -1px);
}

.btn-primary {
  color: #fff;
  background: var(--seal);
  border-color: var(--seal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px -12px rgba(143, 63, 32, 0.85);
}
.btn-primary:hover {
  color: #fff;
  background: var(--seal-deep);
  border-color: var(--seal-deep);
}

/* 大号按钮右侧那枚圆：悬停时翻成白底 */
.btn-arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: -0.85rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-arrow .i {
  transition: transform 0.35s var(--ease);
}
.btn-primary:hover .btn-arrow {
  color: var(--seal-deep);
  background: #fff;
}
.btn-primary:hover .btn-arrow .i {
  transform: translateX(2px);
}

.btn-ghost {
  background: rgba(247, 243, 234, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover {
  background: rgba(247, 243, 234, 0.85);
}
.btn-quiet {
  border-color: transparent;
  color: var(--ink-2);
}
.btn-quiet:hover {
  background: transparent;
  border-color: var(--rule-2);
}
.btn-ondark {
  color: var(--on-night);
  border-color: rgba(239, 231, 214, 0.26);
}
.btn-ondark:hover {
  color: #fff;
  border-color: rgba(239, 231, 214, 0.6);
  background: rgba(239, 231, 214, 0.06);
}

.btn-lg {
  min-height: 3.5rem;
  padding: 0 1.15rem 0 1.65rem;
  font-size: 1.02rem;
}
.btn-ghost.btn-lg {
  padding: 0 1.65rem;
}
.btn-sm {
  min-height: 2.35rem;
  padding: 0 1rem;
  font-size: 0.86rem;
}

/* ---------------------------------------------------------------- 导航 */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(237, 230, 214, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.4s ease, border-color 0.4s ease, -webkit-backdrop-filter 0.4s ease,
    backdrop-filter 0.4s ease;
}
/* 首屏：退成透明，直接压在主视觉上。只有脚本会挂这个类 */
.nav.at-top {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--seal);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}
.brand-word {
  font-family: var(--f-display);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.005em;
}
.brand-word i,
.foot-word em,
.ht-latin em {
  font-style: italic;
}

.nav-links {
  display: flex;
  gap: 0.15rem;
  margin-inline: auto;
}
.nav-links a {
  position: relative;
  padding: 0.45rem 0.8rem;
  font-size: 0.92rem;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
[data-lang='en'] .nav-links a {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-links a:hover {
  color: var(--ink);
  background: rgba(29, 26, 23, 0.05);
}
.nav-links a.is-active {
  color: var(--ink);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.05rem;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  background: var(--seal);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}
.nav-links a.is-active::after {
  transform: scale(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* 语言：一颗按钮，两半都画出来，当前那半涂实 */
.lang-toggle {
  display: inline-flex;
  padding: 3px;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--ink-2);
  background: rgba(247, 243, 234, 0.45);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  cursor: pointer;
}
.lang-opt {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.lang-en {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
[data-lang='zh'] .lang-zh,
[data-lang='en'] .lang-en {
  color: var(--paper-hi);
  background: var(--ink);
}

.nav-menu {
  display: none;
  position: relative;
}
.nav-menu summary {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ink);
  list-style: none;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  cursor: pointer;
}
.nav-menu summary::-webkit-details-marker {
  display: none;
}
.nav-sheet {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 15rem;
  padding: 0.5rem;
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.nav-sheet a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.75rem 0.9rem;
  font-size: 1.02rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav-sheet a i {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-style: normal;
  color: var(--seal-deep);
}
.nav-sheet a:hover {
  background: var(--paper-2);
}

/* ---------------------------------------------------------------- 抬头 */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  height: 100svh;
  min-height: 42rem;
  max-height: 72rem;
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  animation: hero-settle 2.8s var(--ease) both;
}
.hero-art img {
  width: 100%;
  height: 112%;
  margin-top: -2%;
  object-fit: cover;
  object-position: 56% 42%;
  will-change: transform;
}
/* 画几乎不压：只在左下角铺一层晨雾托住正文，右上角给题款留一片淡处，底边化进下一节 */
.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 88% at 6% 70%, rgba(237, 230, 214, 0.95) 0%, rgba(237, 230, 214, 0.86) 36%, rgba(237, 230, 214, 0.42) 60%, rgba(237, 230, 214, 0) 80%),
    radial-gradient(28% 48% at 93% 30%, rgba(237, 230, 214, 0.7) 0%, rgba(237, 230, 214, 0) 75%),
    linear-gradient(180deg, rgba(237, 230, 214, 0.55) 0%, rgba(237, 230, 214, 0) 15%),
    linear-gradient(0deg, var(--paper) 0%, rgba(237, 230, 214, 0) 10%);
}
@keyframes hero-settle {
  from {
    transform: scale(1.08);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fall {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 题款 */
.inscription {
  position: absolute;
  top: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3.5rem));
  right: calc(max(var(--gutter), env(safe-area-inset-right)) + 1vw);
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(1rem, 1.6vw, 1.75rem);
  color: var(--ink);
  animation: fall 1.4s 0.6s var(--ease) both;
}
.ins-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.ins-title {
  margin: 0;
  writing-mode: vertical-rl;
  font-size: clamp(2.2rem, 3.9vw, 4.1rem);
  line-height: 1;
  letter-spacing: 0.16em;
  text-shadow: 0 0 18px rgba(237, 230, 214, 0.9), 0 0 4px rgba(237, 230, 214, 0.8);
}
.tcy {
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
}
.ins-seal {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  direction: rtl; /* 印文从右列读起：八字 / 山路 */
  width: clamp(2.6rem, 3.3vw, 3.3rem);
  height: clamp(2.6rem, 3.3vw, 3.3rem);
  padding: 3px;
  color: var(--paper-hi);
  background: var(--seal) var(--grain);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(247, 243, 234, 0.7);
  transform: rotate(-2deg);
}
.ins-seal i {
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: clamp(0.95rem, 1.2vw, 1.25rem);
  line-height: 1;
}
.ins-verse {
  margin: clamp(3.5rem, 6vw, 6rem) 0 0;
  writing-mode: vertical-rl;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 2.1;
  letter-spacing: 0.42em;
  color: var(--ink-2);
  text-shadow: 0 0 12px rgba(237, 230, 214, 0.95), 0 0 3px rgba(237, 230, 214, 0.9);
}

.hero-body {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) clamp(6.5rem, 15vh, 9rem)
    max(var(--gutter), env(safe-area-inset-left));
}
.hero-body > * {
  animation: rise 1.1s var(--ease) both;
}
.hero-body > :nth-child(1) {
  animation-delay: 0.35s;
}
.hero-body > :nth-child(2) {
  animation-delay: 0.5s;
}
.hero-body > :nth-child(3) {
  animation-delay: 0.68s;
}
.hero-body > :nth-child(4) {
  animation-delay: 0.85s;
}

.hero-body .kicker,
.hero-line {
  text-shadow: 0 0 14px rgba(237, 230, 214, 0.95), 0 0 3px rgba(237, 230, 214, 0.9);
}
.kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.kicker::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--seal);
}

.hero-title {
  margin: 0;
  font-weight: 400;
}
.ht-latin {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(4.4rem, 11.5vw, 11.5rem);
  line-height: 0.84;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.ht-latin em {
  color: var(--seal);
  padding-right: 0.04em;
}

.hero-line {
  max-width: 31em;
  margin: 1.75rem 0 0;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.9;
  color: var(--ink-2);
}
[data-lang='en'] .hero-line {
  line-height: 1.55;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2.25rem 0 0;
}

/* 右下角那张「正在放映」 */
.hero-reel {
  position: absolute;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: clamp(5.5rem, 13vh, 7.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 21.5rem;
  padding: 0.55rem 1.25rem 0.55rem 0.55rem;
  color: var(--ink);
  text-decoration: none;
  background: rgba(247, 243, 234, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease, background-color 0.3s ease;
  animation: rise 1.1s 1s var(--ease) both;
}
.hero-reel:hover {
  transform: translateY(-3px);
  background: rgba(247, 243, 234, 0.9);
  box-shadow: var(--shadow-2);
}
.reel-thumb {
  position: relative;
  flex: none;
  width: 7.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--night);
}
.reel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.hero-reel:hover .reel-thumb img {
  transform: scale(1.08);
}
.reel-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(20, 17, 14, 0.25);
}
.reel-play .i {
  width: 1.5rem;
  height: 1.5rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.reel-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.reel-label {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seal-deep);
}
.reel-name {
  margin-top: 0.2rem;
  font-size: 1.02rem;
}
.reel-sub {
  font-size: 0.78rem;
  color: var(--ink-3);
}

.hero-foot {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 1.6rem max(var(--gutter), env(safe-area-inset-left));
}
.hero-tools {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.scroll-cue i {
  position: relative;
  width: 1px;
  height: 2.5rem;
  overflow: hidden;
  background: var(--rule-2);
}
.scroll-cue i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--seal);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(100%);
  }
}

/* ---------------------------------------------------------------- 章 */
.section {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.chapter {
  margin: 0 0 clamp(3rem, 6vw, 5.5rem);
}
.chapter-rule {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 0.85rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink);
}
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.chapter-num {
  grid-column: 1 / span 3;
  margin: 0;
  font-family: var(--f-zh);
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: 0.9;
  color: var(--seal);
}
.chapter-body {
  grid-column: 4 / -1;
}
.chapter-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 5.6vw, 5.2rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.005em;
}
.chapter-orn {
  margin: 0.6rem 0 0;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--ink-3);
}
/* 英文版的旁注是中文：中文没有斜体，换成拉开字距的正体 */
[data-lang='en'] .chapter-orn {
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: 0.4em;
}
.lede {
  max-width: 38em;
  margin: 1.75rem 0 0;
  font-size: 1.08rem;
  color: var(--ink-2);
}
.lede b {
  color: var(--seal-deep);
}

/* ---------------------------------------------------------------- 壹 · 一条路 */
.statement {
  max-width: 23em;
  margin: 0 0 clamp(3.5rem, 7vw, 6rem);
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 3vw, 2.75rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink);
}
[data-lang='en'] .statement {
  max-width: 21em;
  font-size: clamp(1.9rem, 3.8vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.statement em {
  font-style: italic;
  font-size: 1.12em;
  line-height: 1;
  color: var(--seal);
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
}
.route-map {
  grid-column: 1 / span 6;
  margin: 0;
}
.route-map svg {
  width: 100%;
  height: auto;
  max-height: 40rem;
  margin-inline: auto;
  overflow: visible;
}
.map-frame {
  fill: none;
  stroke: var(--rule-2);
  stroke-width: 0.8;
}
.map-ticks {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 0.8;
}
.map-contours ellipse {
  fill: none;
  stroke: rgba(29, 26, 23, 0.085);
  stroke-width: 1;
}
.route-road use {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.road-edge {
  stroke: var(--ink);
  stroke-width: 13;
}
.road-bed {
  stroke: var(--paper-hi);
  stroke-width: 9.5;
}
/* #loop 带 pathLength=100：这里的虚线长度是「全程的百分比」 */
.road-line {
  stroke: var(--seal);
  stroke-width: 0.9;
  stroke-dasharray: 0.35 0.5;
  opacity: 0.75;
}
.road-gap {
  stroke: var(--paper);
  stroke-width: 21;
  stroke-linecap: butt !important;
}
/* 桥身用平头：两端正好落在自己那条路上，接缝看不出来 */
.road-bridge use {
  stroke-linecap: butt;
}
.route-stations circle {
  fill: var(--paper-hi);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.route-stations .frag circle {
  fill: var(--seal);
  stroke: var(--paper-hi);
  stroke-width: 2;
}
.route-stations .frag .st-ring {
  fill: none;
  stroke: var(--seal);
  stroke-width: 0.8;
  opacity: 0.55;
}
.route-stations text,
.map-compass text {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  fill: var(--ink-3);
  text-anchor: middle;
}
.route-stations .frag text {
  fill: var(--seal-deep);
}
.rider-dot {
  fill: var(--seal);
  stroke: var(--paper-hi);
  stroke-width: 2;
}
.rider-halo {
  fill: var(--seal);
  opacity: 0.18;
}
.map-compass circle {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 0.8;
}
.map-compass path {
  fill: var(--ink);
}

/* 入场时路自己画出来：只有脚本会挂 .will-draw，没脚本时它本来就是画好的 */
.will-draw .draw {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.6s cubic-bezier(0.6, 0.05, 0.25, 1);
}
.will-draw .road-line,
.will-draw .road-bridge,
.will-draw .route-stations g,
.will-draw .rider,
.will-draw .map-contours {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.will-draw.is-drawn .draw {
  stroke-dashoffset: 0;
}
.will-draw.is-drawn .road-line {
  opacity: 0.75;
}
.will-draw.is-drawn .road-bridge,
.will-draw.is-drawn .route-stations g,
.will-draw.is-drawn .rider,
.will-draw.is-drawn .map-contours {
  opacity: 1;
}

.route-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin-top: 1.5rem;
  font-size: 0.84rem;
  color: var(--ink-3);
}
.route-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--paper-hi);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
.dot-frag {
  background: var(--seal);
  border-color: var(--seal);
}
.route-note {
  flex-basis: 100%;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stats {
  grid-column: 8 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.75rem var(--col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stats li {
  display: flex;
  flex-direction: column;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}
.stats b {
  font-family: var(--f-display);
  font-size: clamp(3rem, 5.4vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stats small {
  margin-left: 0.35rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.stats li > span {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- 贰 · 交付物 */
.section-deliv {
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.toc {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.toc a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: clamp(4rem, 8vw, 7rem) minmax(0, 1.3fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 0.5rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  overflow: hidden;
  transition: padding 0.5s var(--ease);
}
.toc a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper-hi);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease);
}
.toc a:hover {
  padding-left: 1.5rem;
  padding-right: 1.25rem;
}
.toc a:hover::before {
  transform: scaleY(1);
}
.toc-num {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  line-height: 1;
  color: var(--seal);
}
.toc-name {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.2;
}
.toc-meta {
  font-size: 0.9rem;
  color: var(--ink-3);
}
.toc-go {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease);
}
.toc a:hover .toc-go {
  color: var(--paper-hi);
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(2px);
}

/* 每件交付物的抬头：大号序号 + 标题 */
.deliv-head {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  margin: 0 0 2rem;
}
.deliv-head .num,
.reel-title .num {
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 6vw, 5.6rem);
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: var(--seal);
}
.deliv-head h3,
.reel-title h3 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
}
.deliv-sub {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.deliv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

/* ---------- 01 放映厅 ---------- */
.screening {
  position: relative;
  margin-top: clamp(4.5rem, 9vw, 7rem);
  padding: clamp(4rem, 8vw, 7rem) 0;
  color: var(--on-night);
  background:
    radial-gradient(ellipse 60% 45% at 50% 46%, rgba(180, 85, 47, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 0%, rgba(93, 123, 108, 0.14), transparent 70%),
    var(--night) var(--grain);
}
.screening a {
  color: var(--seal-light);
}
.screening .deliv-sub,
.screening .card-meta {
  color: var(--on-night-2);
}
.screening code {
  background: rgba(239, 231, 214, 0.1);
}

.reel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
}
.slate {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin: 0 0 1.5rem;
  padding-bottom: 0.85rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-night-2);
  border-bottom: 1px solid var(--on-night-rule);
}
.slate span:first-child {
  color: var(--seal-light);
}
.reel-title {
  display: flex;
  align-items: flex-end;
  gap: 1.4rem;
}
.reel-title .num {
  color: var(--seal-light);
}
.reel-title h3 {
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
}

.video-frame {
  position: relative;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 1.75rem;
}
.video-box {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(239, 231, 214, 0.08), 0 60px 120px -50px rgba(0, 0, 0, 0.95);
}
.video-box video {
  width: 100%;
  height: 100%;
}
/* 四角裁切标 */
.crop {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--seal-light);
  pointer-events: none;
}
.crop-tl {
  top: -12px;
  left: -12px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}
.crop-tr {
  top: -12px;
  right: -12px;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
}
.crop-bl {
  bottom: -12px;
  left: -12px;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
}
.crop-br {
  bottom: -12px;
  right: -12px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

.card-meta {
  margin: 0 0 1.75rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* 场记板参数条 */
.slate-strip {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--on-night-rule);
  border-bottom: 1px solid var(--on-night-rule);
}
.slate-strip dt {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--on-night-2);
}
[data-lang='en'] .slate-strip dt {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.slate-strip dd {
  margin: 0.3rem 0 0;
  font-family: var(--f-mono);
  font-size: 0.92rem;
  color: var(--on-night);
}
.slate-strip dd span {
  font-family: var(--f-text);
}

/* ---------------------------------------------------------------- 条目 */
.notes {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: n;
}
.notes li {
  position: relative;
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  font-size: 0.95rem;
  color: var(--ink-2);
  counter-increment: n;
}
/* 朱点。不是圆点列表符：朱印是这个作品的颜色，列表符也用它 */
ul.notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 5px;
  background: var(--seal);
  transform: rotate(45deg);
}
/* 有序的条目换成两位编号 */
ol.notes li {
  padding-left: 2.6rem;
}
ol.notes li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.32em;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--seal-deep);
}
.notes b {
  color: var(--seal-deep);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem clamp(2rem, 5vw, 4.5rem);
  margin-top: 2.25rem;
}
.screening .notes li {
  color: var(--on-night-2);
}
.screening ol.notes li::before {
  color: var(--seal-light);
}
.screening .notes b {
  color: var(--on-night);
}

/* 素材没跟这次构建走时的替身（见 HTML 里的注释）。
   `data-missing` 是 tools/build-submission.mjs 挂在 <html> 上的。 */
.media-note {
  display: none;
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  font-size: 0.92rem;
  color: var(--on-night-2);
  background: rgba(239, 231, 214, 0.05);
  border: 1px dashed rgba(239, 231, 214, 0.3);
  border-radius: var(--radius-sm);
}
[data-missing~='video'] .video-frame,
[data-missing~='video'] .alt-links {
  display: none;
}
[data-missing~='video'] .media-note {
  display: block;
}

/* ---------- 02 在线 Demo ---------- */
.deliv {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  margin-top: clamp(5rem, 10vw, 8rem);
}
.deliv-side {
  grid-column: 1 / span 5;
}
.deliv-notes {
  grid-column: 7 / -1;
  padding-top: 0.5rem;
}
@media (min-width: 961px) {
  /* 右栏说明比左栏长得多：左边那张票跟着滚，按钮一直在手边 */
  .deliv-side {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
  }
}

/* 主镜像：一张朱红的票，中间一道齿孔 */
.ticket {
  position: relative;
  padding: 1.6rem 1.6rem 1.4rem;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.12), transparent 50%),
    var(--seal) var(--grain);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(143, 63, 32, 0.75);
  overflow: hidden;
}
.ticket-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding-bottom: 1.4rem;
  color: #fff;
  text-decoration: none;
}
.ticket-tag {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.82;
}
.ticket-cta {
  grid-column: 1;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: 1.1;
}
.ticket-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.45s var(--ease);
}
.ticket-main:hover .ticket-arrow {
  color: var(--seal-deep);
  background: #fff;
  transform: rotate(45deg);
}
.ticket .url-row {
  position: relative;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.4);
}
/* 齿孔两端的半圆缺口 */
.ticket .url-row::before,
.ticket .url-row::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  background: var(--paper);
  border-radius: 50%;
}
.ticket .url-row::before {
  left: calc(-1.6rem - 10px);
}
.ticket .url-row::after {
  right: calc(-1.6rem - 10px);
}
.ticket .url-row code {
  color: #fff;
  background: rgba(0, 0, 0, 0.16);
  border-color: transparent;
}
.ticket .copy {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.ticket .copy:hover {
  color: var(--seal-deep);
  background: #fff;
  border-color: #fff;
}

.mirror {
  margin: 1rem 0 1.25rem;
  padding: 1.2rem 1.4rem 1.3rem;
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.mirror-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.1rem 1rem;
  color: var(--ink);
  text-decoration: none;
}
.mirror-tag {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mirror-name {
  grid-column: 1;
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1.25;
}
.mirror-link .i {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1.3rem;
  height: 1.3rem;
  transition: transform 0.35s var(--ease);
}
.mirror-link:hover .i {
  transform: translate(2px, -2px);
}

.deliv-notes li {
  margin: 0;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  border-top: 1px solid var(--rule);
}
.deliv-notes li:first-child {
  padding-top: 0;
  border-top: 0;
}
.deliv-notes li::before {
  top: calc(1.1rem + 0.32em);
}
.deliv-notes li:first-child::before {
  top: 0.32em;
}

.alt-links {
  margin: 0;
  font-size: 0.92rem;
}

/* 镜像可用性之类的补充说明：没朱点，只压一个灰 */
.notes-hint {
  margin: 0.85rem 0 0;
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- 待填
 * `site.json` 里留空的链接（正式地址还没定）在产物里会被摘掉 href，
 * 换成这个标记。这里画成虚线块 + 一个「待填」角标：
 *
 * 为什么不给它一个 href：页面是给别人看的，一个点了没反应的按钮
 * 比一句「这个还没定」糟糕得多。摘掉 href 之后它在 HTML 层面
 * 本来就不是链接——不可聚焦、不会被读屏念成链接。
 */
[data-todo] {
  cursor: default;
  border-style: dashed;
  border-color: var(--seal-soft);
  color: var(--ink-3);
  background: transparent;
  box-shadow: none;
  opacity: 1;
}
[data-todo]:hover {
  border-color: var(--seal-soft);
  background: transparent;
  color: var(--ink-3);
}
code[data-todo] {
  color: var(--ink-3);
  border-style: dashed;
}
[data-todo]::after {
  content: '待填';
  margin-left: 0.5em;
  padding: 0.05em 0.45em;
  font-size: 0.7em;
  letter-spacing: 0.06em;
  color: var(--seal-deep);
  border: 1px solid var(--seal-soft);
  border-radius: 4px;
  vertical-align: 0.12em;
}
/* 角标跟着语言走：中文页写「待填」，英文页写 TBD */
[data-lang='en'] [data-todo]::after {
  content: 'TBD';
}
/* 正文里的 <code data-todo> 本身就有那句字，别再挂一个角标 */
code[data-todo]::after {
  content: none;
}

/* ---------------------------------------------------------------- 链接行 */
.url-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
}
.url-row code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  background: rgba(29, 26, 23, 0.045);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.copy {
  flex: none;
  padding: 0 1rem;
  font: inherit;
  font-size: 0.84rem;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.copy:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.copy-done {
  display: none;
}
.copy[data-done='1'],
.ticket .copy[data-done='1'] {
  color: #fff;
  background: var(--jade);
  border-color: var(--jade);
}
.copy[data-done='1'] .copy-idle {
  display: none;
}
.copy[data-done='1'] .copy-done {
  display: inline;
}

/* 终端样式的命令行：深底、带一个 $ 提示符（提示符是伪元素，不会被复制走） */
.term code {
  color: var(--on-night);
  background: var(--night-2);
  border-color: var(--night-2);
}
.term code::before {
  content: '$ ';
  color: var(--seal-light);
}

/* ---------- 03 下载 ---------- */
.deliv-dl {
  display: block;
}
.dl {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem 1.5rem;
  padding: 1.5rem 0.25rem;
  border-bottom: 1px solid var(--rule-2);
}
/* 桌面版是最该点的那一个：单独做成一张墨色的大卡 */
.dl-feature {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 1.25rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--on-night);
  background:
    radial-gradient(80% 140% at 100% 100%, rgba(180, 85, 47, 0.28), transparent 60%),
    var(--night) var(--grain);
  border: 0;
  border-radius: var(--radius);
}
.dl-feature + .dl-row {
  border-top: 1px solid var(--ink);
}
.dl-idx {
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-style: italic;
  line-height: 1;
  color: var(--seal);
}
.dl-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dl-label {
  font-size: 1.12rem;
  line-height: 1.45;
}
.dl-feature .dl-label {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.1;
}
.dl-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0.75rem;
}
.dl-platforms i {
  padding: 0.25rem 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--on-night);
  border: 1px solid rgba(239, 231, 214, 0.28);
  border-radius: 999px;
}
.dl-hint {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.dl-feature .dl-hint {
  color: var(--on-night-2);
}
.dl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.url-row-wide {
  grid-column: 2 / -1;
  margin: 0;
}

/* ---------------------------------------------------------------- 叁 · 故事 */
.section-story {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(93, 123, 108, 0.08), transparent 70%),
    var(--paper-2) var(--grain);
}
.story-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: stretch;
}
.prose {
  grid-column: 4 / span 6;
  font-size: clamp(1.06rem, 1.2vw, 1.18rem);
  line-height: 2.05;
}
[data-lang='en'] .prose {
  font-size: clamp(1.12rem, 1.3vw, 1.26rem);
  line-height: 1.7;
}
.prose p {
  margin: 0 0 1.5rem;
}
.prose b {
  color: var(--seal-deep);
}
.dropcap > span {
  display: block;
}
.dropcap > span::first-letter {
  float: left;
  margin: 0.1em 0.16em 0 0;
  font-family: var(--f-display);
  font-size: 3.7em;
  line-height: 0.88;
  color: var(--seal);
}
[data-lang='en'] .dropcap > span::first-letter {
  margin-top: 0.06em;
  font-size: 4.4em;
  line-height: 0.78;
}

/* 碑：圆顶的石面，双线框，中文竖排 */
.stele {
  grid-column: 10 / -1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  min-height: 26rem;
  padding: 5rem 1.5rem 2.25rem;
  background: linear-gradient(180deg, var(--paper-hi), #efe9dc);
  border-radius: 50% 50% 6px 6px / 9rem 9rem 6px 6px;
  box-shadow: inset 0 0 0 1px var(--rule-2), inset 0 0 0 9px var(--paper-hi), inset 0 0 0 10px var(--rule), var(--shadow-1);
}
.stele-cap {
  position: absolute;
  top: 2.6rem;
  left: 50%;
  width: 1.9rem;
  height: 1.9rem;
  margin-left: -0.95rem;
  background: var(--seal) var(--grain);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(247, 243, 234, 0.65);
}
.stele-cap::after {
  content: '碑';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--paper-hi);
}
.stele-text {
  margin: 1.5rem 0 0;
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  line-height: 1.6;
  color: var(--ink);
}
.stele-text .zh {
  display: block;
  writing-mode: vertical-rl;
  line-height: 2.1;
  letter-spacing: 0.34em;
}
.stele-text .en {
  display: block;
  max-width: 9em;
  font-family: var(--f-display);
  font-style: italic;
  text-align: center;
  line-height: 1.2;
}
.stele-foot {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}
[data-lang='en'] .stele-foot {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
}

/* 五件乐事：一排五条屏 */
.joys {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(4rem, 8vw, 6.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule-2);
}
.joys li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0.5rem clamp(1.4rem, 3vw, 2.25rem);
  text-align: center;
  border-left: 1px solid var(--rule);
}
.joys li:first-child {
  border-left: 0;
}
.joys b {
  font-family: var(--f-zh);
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 1;
  color: var(--ink);
  transition: transform 0.5s var(--ease), color 0.3s ease;
}
.joys li:hover b {
  transform: translateY(-5px);
  color: var(--seal);
}
/* 茶是下一节拍的那一件，给它一点朱色接过去 */
.joy-tea b {
  color: var(--seal);
}
.joy-en {
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--ink-2);
}
.joy-visits {
  display: flex;
  gap: 5px;
  margin: 0.2rem 0;
}
.joy-visits i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}
.joy-tea .joy-visits i {
  background: var(--seal);
}
.joys li > .zh,
.joys li > .en {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.joys-sum {
  margin: 1.4rem 0 0;
  font-size: 0.88rem;
  text-align: center;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- 肆 · 宣传物料
 * 氛围片与三张静帧是**AI 生成的画面**，不是游戏画面。每一帧左上角压一枚
 * 「AI 生成」角标——角标在画面**里面**，截图、转发都带着它，不靠读者去读图注。
 */
.promo-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.promo {
  grid-column: 1 / span 8;
  margin: 0;
}
.promo-notes {
  grid-column: 10 / -1;
}
/**
 * 相框只包住 video，图注在框外——`.promo`（figure）自己不设 aspect-ratio。
 *
 * 这不是风格问题：把图注放进一个带 aspect-ratio 的 overflow:hidden 盒子里，
 * 盒高会被锁死成 16:9，图注排在 video 之后就被整个裁掉，页面上直接看不见。
 */
.promo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--night);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
/**
 * `object-fit: cover` 在这条上是必须的，不是顺手加的。
 *
 * 源片 864×496 是 1.742，比 16:9 的 1.778 略窄；不写 object-fit 就是横向拉伸约 2%，
 * 一张正对着光拍的静物，拉没拉长看得出来。cover 改成裁掉上下各约 5px。
 */
.promo-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ai-tag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 1;
  padding: 0.22rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(20, 17, 14, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  pointer-events: none;
}
[data-lang='en'] .ai-tag {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
}
.promo-cap {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.promo-notes li {
  margin-bottom: 1.25rem;
}

/* 成片那张最大，两张候选并排在右 */
.promo-stills {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  align-items: end;
}
.promo-stills figure {
  margin: 0;
}
.still {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-3);
}
.promo-stills img {
  width: 100%;
  height: auto;
  /* 三张都是 16:9，但宽度不同（1280 与降采样后的），钉住比例它们才会一样高 */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 1s var(--ease), filter 0.5s ease;
}
.promo-stills figure:hover img {
  transform: scale(1.04);
}
/* 未采用的那张降一点饱和——它是被比下去的那个方向，不该和成片抢 */
.still-unused img {
  filter: saturate(0.5) brightness(0.95);
}
.still-unused:hover img {
  filter: none;
}
.promo-stills figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- 伍 · 工程 */
.spec {
  margin: 0;
}
.spec dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule-2);
}
.spec dl > div {
  padding: 1.6rem 1.5rem 1.75rem;
  border-left: 1px solid var(--rule);
}
.spec dl > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.spec dt {
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
[data-lang='en'] .spec dt {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.spec dd {
  margin: 0;
}
.spec dd b {
  display: block;
  margin: 0.9rem 0 0.7rem;
  font-family: var(--f-display);
  font-size: clamp(3rem, 5.8vw, 5.4rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.spec dd small {
  margin-left: 0.3rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.spec dd > span {
  font-size: 0.88rem;
  color: var(--ink-2);
}
.spec figcaption {
  margin: 1rem 0 0;
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.stack li {
  padding: 0.4rem 0.95rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
}

.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(4rem, 8vw, 6rem);
}
.col {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}
.col-num {
  margin: 0;
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-style: italic;
  line-height: 1;
  color: var(--seal);
}
.col h4 {
  margin: 0.6rem 0 1.4rem;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.25;
}
.col .notes li {
  font-size: 0.93rem;
  margin-bottom: 1rem;
}

/* ---------------------------------------------------------------- 陆 · 联系：明信片 */
.section-contact {
  padding-top: clamp(2rem, 4vw, 3rem);
}
.chapter-slim {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.chapter-slim .chapter-rule {
  margin-bottom: 0;
}
.postcard {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--paper-hi) var(--grain);
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--rule), var(--shadow-2);
  overflow: hidden;
}
/* 航空信封的斜纹边：朱、纸、山色、纸 */
.postcard::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
  background: repeating-linear-gradient(
    -45deg,
    var(--seal) 0 14px,
    transparent 14px 28px,
    var(--jade) 28px 42px,
    transparent 42px 56px
  );
}
.postcard-msg {
  grid-column: 1 / span 7;
}
.postcard-kicker {
  margin: 0 0 0.75rem;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--ink-3);
}
.postcard-msg .lede {
  margin-bottom: 1.75rem;
}
.qr-notes b {
  color: var(--seal-deep);
}
.address {
  display: grid;
  gap: 1.1rem;
  margin: 2.5rem 0 0;
  max-width: 30rem;
}
.address > span {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.55rem;
  font-size: 1.1rem;
  border-bottom: 1px dotted var(--ink-3);
}
.address i {
  flex: none;
  width: 3rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.postcard-side {
  grid-column: 9 / -1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: clamp(1rem, 3vw, 2.5rem);
  border-left: 1px solid var(--rule-2);
}

/* 邮票：齿孔用两层 mask 合出来——一层满铺小圆孔，一层内缩的实心矩形，并起来就只剩边上一圈孔 */
.stamp {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 6.25rem;
  aspect-ratio: 4 / 5;
  padding: 6px;
  background: #fbf8f1;
  -webkit-mask:
    radial-gradient(circle 3.2px, transparent 96%, #000) -5px -5px / 10px 10px round,
    linear-gradient(#000 0 0) 5px 5px / calc(100% - 10px) calc(100% - 10px) no-repeat;
  mask:
    radial-gradient(circle 3.2px, transparent 96%, #000) -5px -5px / 10px 10px round,
    linear-gradient(#000 0 0) 5px 5px / calc(100% - 10px) calc(100% - 10px) no-repeat;
  filter: drop-shadow(0 6px 10px rgba(29, 26, 23, 0.18));
  transform: rotate(4deg);
}
.stamp-inner {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}
.stamp-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.stamp-value {
  position: absolute;
  right: 0.3rem;
  bottom: 0.15rem;
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* 邮戳：两圈 + 一截波纹销票线，斜压在邮票左下 */
.postmark {
  position: absolute;
  top: 4.25rem;
  right: 4rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  color: var(--seal);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.8;
  transform: rotate(-14deg);
  pointer-events: none;
}
.postmark::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 5rem;
  height: 1.6rem;
  margin-top: -0.8rem;
  background: repeating-linear-gradient(180deg, currentColor 0 1.5px, transparent 1.5px 6.5px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%);
  mask: linear-gradient(90deg, transparent, #000 60%);
}
.postmark-ring {
  position: absolute;
  inset: 5px;
  border: 1px dashed currentColor;
  border-radius: 50%;
}
.postmark-text {
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

/* 微信二维码是竖长的手机截图：装进一只白纸框里当相片摆，宽度锁上限、
   高度 auto——竖图跟着框走，不会被栏宽抻成横幅。 */
.qr-card {
  width: min(15rem, 100%);
  margin: 9.5rem 0 0;
  padding: 0.7rem 0.7rem 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--rule), var(--shadow-1);
  transform: rotate(-1.5deg);
  transition: transform 0.5s var(--ease);
}
.qr-card:hover {
  transform: none;
}
.qr-card img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.qr-card figcaption {
  padding: 0.65rem 0.2rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

/* ---------------------------------------------------------------- 页脚 */
.foot {
  position: relative;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0 0;
  overflow: hidden;
  color: var(--on-night-2);
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(180, 85, 47, 0.12), transparent 70%),
    var(--night) var(--grain);
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.foot-line {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  line-height: 1.12;
  color: var(--on-night);
}
[data-lang='en'] .foot-line {
  line-height: 1;
}
.foot-mid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--on-night-rule);
  border-bottom: 1px solid var(--on-night-rule);
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.foot-links a,
.foot-top-link {
  color: var(--on-night-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.foot-links a:hover,
.foot-top-link:hover {
  color: var(--on-night);
}
.foot-top-link {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foot-note {
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
}
/* 底部巨大的字标：只露上大半截，往下渐隐 */
.foot-word {
  margin: clamp(2rem, 5vw, 4rem) 0 0;
  font-family: var(--f-display);
  font-size: 21.5vw;
  line-height: 0.8;
  letter-spacing: -0.035em;
  white-space: nowrap;
  text-align: center;
  color: transparent;
  background: linear-gradient(180deg, rgba(239, 231, 214, 0.22) 10%, rgba(239, 231, 214, 0) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-user-select: none;
  user-select: none;
  transform: translateY(0.12em);
}
.foot-word em {
  background: linear-gradient(180deg, rgba(232, 147, 108, 0.55) 10%, rgba(232, 147, 108, 0) 88%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------------------------------------------------------------- 入场
 * 只有脚本会挂 .reveal：没有脚本时什么都不藏。观察区往下多放了一截，
 * 元素在露出之前就开始淡入——读者滚到时它已经在了，不是等它出来。
 * 前缀 body 是为了压过 `.joys li` 这类自带 transition 的选择器。
 */
body .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}
body .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- 宽度 */
@media (max-width: 1180px) {
  .nav-links a {
    padding-inline: 0.55rem;
  }
  .hero-reel {
    display: none;
  }
}

@media (max-width: 960px) {
  .nav-links {
    display: none;
  }
  .nav-actions {
    margin-left: auto;
  }
  .nav-menu {
    display: block;
  }
  .chapter-num {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
    font-size: clamp(2.8rem, 9vw, 4rem);
  }
  .chapter-body {
    grid-column: 1 / -1;
  }
  .route-map,
  .stats,
  .deliv-side,
  .deliv-notes,
  .prose,
  .stele,
  .promo,
  .promo-notes,
  .postcard-msg,
  .postcard-side {
    grid-column: 1 / -1;
  }
  .route-map {
    max-width: 30rem;
    margin: 0 auto 3.5rem;
  }
  .deliv-notes {
    margin-top: 3rem;
  }
  .stele {
    min-height: 0;
    margin-top: 2.5rem;
    padding: 4rem 1.5rem 2.25rem;
  }
  .promo-notes {
    margin-top: 2.5rem;
  }
  .cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .spec dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .spec dl > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .spec dl > div:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
  .slate-strip {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    column-gap: 2.5rem;
  }
  .postcard-side {
    margin-top: 2.5rem;
    padding: 2.5rem 0 0;
    border-left: 0;
    border-top: 1px dashed var(--rule-2);
  }
  .stamp {
    top: 2rem;
  }
  .postmark {
    top: 6.25rem;
  }
  .qr-card {
    margin-top: 11rem;
  }
}

@media (max-width: 760px) {
  /* 窄屏抬头：画铺满整屏，题款缩在右上，正文压在下半截的晨雾里 */
  .hero {
    max-height: none;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
  }
  .hero-art img {
    object-position: 46% 30%;
  }
  .hero-art::after {
    background:
      linear-gradient(0deg, var(--paper) 0%, rgba(237, 230, 214, 0.95) 38%, rgba(237, 230, 214, 0.55) 56%, rgba(237, 230, 214, 0) 72%),
      radial-gradient(45% 35% at 90% 18%, rgba(237, 230, 214, 0.7) 0%, rgba(237, 230, 214, 0) 75%),
      linear-gradient(180deg, rgba(237, 230, 214, 0.6) 0%, rgba(237, 230, 214, 0) 14%);
  }
  .inscription {
    top: calc(var(--nav-h) + 1.25rem);
    gap: 0.75rem;
  }
  .ins-title {
    font-size: 2.1rem;
  }
  .ins-seal {
    width: 2.3rem;
    height: 2.3rem;
  }
  .ins-seal i {
    font-size: 0.85rem;
  }
  .ins-verse {
    margin-top: 2.5rem;
    font-size: 0.82rem;
  }
  .hero-body {
    padding-bottom: 1.5rem;
  }
  .hero-foot {
    position: static;
    padding-bottom: 1.25rem;
  }
  .scroll-cue {
    display: none;
  }
  .statement {
    font-size: 1.45rem;
  }
  [data-lang='en'] .statement {
    font-size: 1.85rem;
  }
  .toc a {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    padding: 1.2rem 0.25rem;
  }
  .toc a:hover {
    padding-left: 0.75rem;
    padding-right: 0.5rem;
  }
  .toc-num {
    grid-row: 1 / span 2;
    font-size: 2.1rem;
  }
  .toc-meta {
    grid-column: 2;
    font-size: 0.82rem;
  }
  .toc-go {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 2.5rem;
    height: 2.5rem;
  }
  .reel-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .crop {
    display: none;
  }
  .notes-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .slate-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .promo-stills {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .promo-stills figure:first-child {
    grid-column: 1 / -1;
  }
  .dl-row {
    grid-template-columns: 2rem minmax(0, 1fr);
    padding: 1.3rem 0;
  }
  .dl-feature {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.6rem;
  }
  .dl-actions,
  .url-row-wide {
    grid-column: 1 / -1;
  }
  .joys li > .zh,
  .joys li > .en {
    font-size: 0.66rem;
    letter-spacing: 0.02em;
  }
  .joy-en {
    font-size: 0.9rem;
  }
  .postcard {
    padding: 2.5rem 1.4rem 2rem;
  }
}

@media (max-width: 520px) {
  :root {
    --nav-h: 3.75rem;
  }
  .brand-word {
    display: none;
  }
  .nav-actions {
    gap: 0.45rem;
  }
  .hero-cta .btn {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .hero-cta .btn-ghost {
    justify-content: center;
  }
  .kicker {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }
  .stats {
    gap: 2rem 1.25rem;
  }
  .spec dl > div {
    padding: 1.25rem 0.75rem 1.25rem 1rem;
  }
  .spec dl > div:nth-child(odd) {
    padding-left: 0;
  }
  .copy {
    padding: 0 0.8rem;
  }
  .ticket {
    padding: 1.3rem 1.2rem 1.2rem;
  }
  .ticket .url-row::before {
    left: calc(-1.2rem - 10px);
  }
  .ticket .url-row::after {
    right: calc(-1.2rem - 10px);
  }
  .foot-top .btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------- 打印
 * 评委有可能把这一页打出来。打印时把 URL 印在链接后面，
 * 否则纸上的「在线 Demo」是个点不了的东西。
 */
@media print {
  .nav,
  .hero-art,
  .inscription,
  .hero-reel,
  .scroll-cue,
  .skip-link,
  .copy,
  .ai-tag,
  .route-map,
  .deliv-actions,
  .crop,
  .stamp,
  .postmark,
  .foot-word,
  /* 相框本身也要收起来：里面那支 video 被藏掉之后，它只剩一个空的深色方块。
     三张静帧是照片，照常印。 */
  .promo-frame,
  .video-frame,
  video {
    display: none !important;
  }
  body,
  .section-story,
  .screening,
  .foot,
  .postcard,
  .ticket,
  .dl-feature {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body {
    font-size: 11pt;
  }
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .hero-body {
    padding: 0 0 1rem;
  }
  .hero-body > * {
    animation: none;
  }
  .hero-foot {
    position: static;
  }
  .screening .notes li,
  .screening .deliv-sub,
  .screening .card-meta,
  .slate-strip dd,
  .slate-strip dt,
  .dl-feature .dl-hint,
  .foot,
  .foot-links a,
  .foot-line,
  .ticket-main {
    color: #333 !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .toc a,
  .mirror,
  .ticket,
  .dl-row,
  .qr-card,
  .stele {
    box-shadow: none;
    break-inside: avoid;
  }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }
}

/* 动效只做在该做的地方，且听系统的 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}