/* ═══════════════════════════════════════════════════════════════════════════
   AIMOTION — 设计 token 唯一真相源 (SSoT)
   ---------------------------------------------------------------------------
   在此之前: 20 个页面各自内联一份 tailwind.config + 一份 <style>, 已漂成 11 个
   互不相同的版本; 改一次品牌色要动 20 个文件。本文件 + assets/aim-tw.js 把那
   11 份归一, 让"改一个 token 全站跟随"成立 —— 这是重构的真 KPI, 不是好看。

   方向 A「放映厅」(echo 2026-08-11 拍板): 素材即设计。
     · 强调色 6 → 1 (陶土橘, 面积 ≤5%), 颜色来自画面本身而非色块
     · 去卡片化: 图就是图, 不加底не加影, 只用发丝线分隔
     · chrome 退到近乎无, 字拉到海报尺度
   参照: A24 (NB International, 整屏胶片作地基, 首屏零按钮) /
         Annapurna (Yorick + Gerstner, 满屏画面 + 居中字标, 别无一物)

   字体自托管 (R 级硬约束): 中国大陆连不上 fonts.googleapis.com —— 改前 22/23
   页从 Google CDN 拉字体, 等于客户自己那边全站掉回系统字体。全部 WOFF2 落本地。
   Inter 已换掉: 它同时在官方 frontend-design 插件与方法论的 AI slop 目录里被点名。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 字体 · 自托管 (176KB, latin 子集; CJK 走系统字体不下载) ────────────────── */
@font-face { font-family: 'Switzer'; src: url('fonts/switzer-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('fonts/switzer-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jbmono-var.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-italic-var.woff2') format('woff2'); font-weight: 500 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* ── 色 · 放映厅只有一个强调色 ───────────────────────────────────────────
     ground 是暖黑不是纯黑 (#000 被禁): 胶片黑底本来就偏暖。               */
  /* 8/12 echo「整体有点暗」: 暖黑整体上提一档(仍是胶片黑, 非灰)。
     ── 色值以 -rgb 通道三元组为唯一来源, hex 形式由 rgb() 派生 ──
     为什么: CDN Tailwind 对 var() 色不出 /alpha 类(bg-ground/85 曾全站静默失效),
     aim-tw.js 用 rgb(var(--x-rgb) / <alpha-value>) 后 /alpha 原生生效。 */
  --ground-rgb:        18 16 13;
  --ground-raised-rgb: 28 25 21;
  --ground:        rgb(var(--ground-rgb));
  --ground-raised: rgb(var(--ground-raised-rgb));
  /* 暗底上的文字阶。命名刻意区别于 ink-1..5 —— 后者是【纸底上的深墨】,
     两套是相反方向, 混用会把白药丸上的字也刷成浅色(踩过)。 */
  --on-dark-rgb:   248 245 238;
  --on-dark:       rgb(var(--on-dark-rgb)); /* 主文字 = 纸奶油, 非纯白 */
  --on-dark-2:     rgba(248,245,238,.74);
  --on-dark-3:     rgba(248,245,238,.52);
  --on-dark-4:     rgba(248,245,238,.32);
  --hairline:      rgba(248,245,238,.16);
  --hairline-soft: rgba(248,245,238,.10);

  --brand-rgb:      232 115 64;
  --brand-deep-rgb: 197 87 31;
  --brand-soft-rgb: 244 184 155;
  --brand:         rgb(var(--brand-rgb)); /* 陶土橘 · 全站唯一强调色 · 面积 ≤5% */
  --brand-deep:    rgb(var(--brand-deep-rgb));
  --brand-soft:    rgb(var(--brand-soft-rgb));

  /* 功能语义色 —— 只用于状态, 不进门面页做装饰 */
  --ok-rgb:   156 184 128;
  --warn-rgb: 201 178 63;
  --err-rgb:  197 61 61;
  --ok:    rgb(var(--ok-rgb));
  --warn:  rgb(var(--warn-rgb));
  --err:   rgb(var(--err-rgb));
  /* 链上语境专用。三档必须齐: 8/11 把 DEFAULT 错映成了 soft(#7B8BC2), 结果
     architecture 的 Layer 0 从深海军蓝板块变成一条亮薰衣草色带, 在影院黑底上
     像块外来物。填充用 --chain, 暗底上的文字用 --chain-soft, 别混。 */
  --chain-rgb:      42 63 140;
  --chain-deep-rgb: 26 40 96;
  --chain-soft-rgb: 123 139 194;
  --chain:      rgb(var(--chain-rgb));
  --chain-deep: rgb(var(--chain-deep-rgb));
  --chain-soft: rgb(var(--chain-soft-rgb));

  /* 纸色工作面 (studio / ecom 创作画布保持纸色, echo 8/10 判据) */
  --paper-rgb:       248 245 238;
  --paper-white-rgb: 255 255 255;
  --paper-stone-rgb: 239 234 224;
  --paper-line-rgb:  229 224 213;
  --paper:        rgb(var(--paper-rgb));
  --paper-white:  rgb(var(--paper-white-rgb));
  --paper-stone:  rgb(var(--paper-stone-rgb));
  --paper-line:   rgb(var(--paper-line-rgb));
  --paper-ink:    #1A1A1A;

  /* ── 字 ──────────────────────────────────────────────────────────────
     CJK 全部走系统字体: 不下载, 国内也不掉字。Latin 在前 CJK 在后 (CJK 铁律)。 */
  --font-sans:  'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-brand: 'Montserrat', var(--font-sans);

  /* ── 字号阶 ──────────────────────────────────────────────────────────
     2026-08-11 实测: 全站曾有 44 种不同字号(含 8.5/9.5/11.5/12.5/15.5 这类
     半像素), 底端 8-13px 挤了 10 档 —— 那不是阶梯, 是随手值。已并到 32 档。

     新代码一律用下面的名字, 别再写 text-[13px]。改这里 = 全站字号跟着走。
     UI 档相邻约 1.1-1.2 倍(数据密集界面容不下 1.25), 展示档才拉到 1.25+。 */
  --t-micro:   10px;   /* 图上角标 / mono 标签下限 */
  --t-xs:      11px;
  --t-sm:      12px;
  --t-base:    13px;
  --t-body:    15px;   /* 正文 */
  --t-lead:    17px;
  --t-h3:      20px;
  --t-h2:      clamp(26px, 3.2vw, 44px);
  --t-display: clamp(34px, 5vw, 64px);
  --t-poster:  clamp(52px, 9vw, 132px);   /* 方向 A 的招牌 */

  /* ── 度 · 8 的倍数, 禁随手值 ────────────────────────────────────────── */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px;
  --container: 1320px;

  /* ── 形 · 放映厅偏直角; 只有主 CTA 是胶囊 ──────────────────────────── */
  --r-media: 2px;
  --r-box:   4px;
  --r-pill:  999px;

  /* ── 动 · 双时钟: 品牌区放电影感, 数据区 0ms ───────────────────────── */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-brand:     600ms;
  --t-ui:        180ms;
  --t-data:      0ms;
}

/* ── 地基 ─────────────────────────────────────────────────────────────── */
html, body { background: var(--ground); color: var(--on-dark); }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 字族工具 ─────────────────────────────────────────────────────────── */
.mono          { font-family: var(--font-mono); }
.gallery-serif { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.brand-word    { font-family: var(--font-brand); font-weight: 800; letter-spacing: -0.01em; }

/* 眉题: mono + 全大写 + 大字距 —— 全站唯一的"标签"语汇 */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  font-weight: 500;
}

/* 海报级标题: 方向 A 的记忆点。大字号必须收紧字距, 否则散。 */
.t-poster {
  font-size: var(--t-poster);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.t-display {
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 600;
}
/* 中文方向相反: 大字号略松, 否则挤成一坨 */
:lang(zh) .t-poster, :lang(ja) .t-poster, :lang(ko) .t-poster { letter-spacing: 0.01em; line-height: 1.02; }
:lang(zh) .t-display, :lang(ja) .t-display, :lang(ko) .t-display { letter-spacing: 0.02em; line-height: 1.15; }

/* ── 暗版惯用语 · 20 页共用 (改这里 = 全站跟随) ─────────────────────────
   方向 A 去卡片化: dk-card 从"填底 + 内描边的卡"降为"只有一条发丝线的容器"。
   影子全删 —— 顶级片厂站几乎不用阴影, 层次靠明度和留白, 不靠浮起。        */
.dk-card {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-box);
}
.dk-hair { border-color: var(--hairline) !important; }
.dk-2    { color: var(--on-dark-2); }
.dk-3    { color: var(--on-dark-3); }

/* 悬浮: 不再位移 + 投影(那是卡片语汇), 改为提亮描边 —— 更克制, 更像片厂 */
.lift { transition: border-color var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease); }
.lift:hover { border-color: var(--hairline); }
.lift:hover img { opacity: .92; }
.lift img { transition: opacity var(--t-ui) var(--ease); }

/* ── 质 · 胶片颗粒 + 暗角: 让暗底有"放映"的厚度, 而不是一块平的深灰 ────── */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.vignette::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* ── 动 · 全站唯一入场语言 ────────────────────────────────────────────
   注意: 只挂在矮元素上。IntersectionObserver 的 threshold 是元素自身高度的
   百分比 —— 挂到比视口还高的容器上就永远不触发, 整块停在透明态。          */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-brand) var(--ease), transform var(--t-brand) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .lift, .lift img { opacity: 1; transform: none; transition: none; }
}

/* ── 纸色创作画布 (studio / ecom) ─────────────────────────────────────── */
.paper-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(192,186,176,.18) 1px, transparent 1px),
    radial-gradient(rgba(192,186,176,.12) 1px, transparent 1px);
  background-size: 22px 22px, 30px 30px;
  background-position: 0 0, 11px 11px;
}

/* ── 媒体墙 ───────────────────────────────────────────────────────────── */
.wall { columns: 2; column-gap: var(--s-1); }
@media (min-width: 768px)  { .wall { columns: 3; } }
@media (min-width: 1100px) { .wall { columns: 4; } }
.wall-tile {
  break-inside: avoid; margin-bottom: var(--s-1);
  position: relative; border-radius: var(--r-media); overflow: hidden;
  background: var(--ground-raised);
}
.wall-tile img, .wall-tile video { width: 100%; display: block; }
.wall-tile .lab {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
  color: rgba(248,245,238,.85);
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
}

/* 图片内描边: 全站统一一条 —— 此前是各页内联 rgba, 值还各不相同 */
.media-ring { box-shadow: inset 0 0 0 1px var(--hairline); }