/* =========================================================
   品牌官网布局模板 · 关于我们 / 作品
   设计还原：CRT 暗屏复古游戏机 · 霓虹绿/青/品红 · 像素描边 · 扫描线 · 硬边方块卡片 · 大字号留白
   ========================================================= */

/* ---------- 字体 ---------- */
@font-face {
  font-family: 'Gilroy';
  src: url('assets/Gilroy-Regular.otf') format('opentype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/Gilroy-Medium.otf') format('opentype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/Gilroy-Bold.otf') format('opentype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/DMSans-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/DMSans-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
/* Pacifico：开源（SIL OFL 1.1）手写签名体，只给品牌名用。
   刻意用字体而不是 logo 图片 —— 以后改站名只改 HTML 里的文字，样式自动跟着走。
   这里存的是拉丁字符子集（ASCII + Latin-1，约 28KB），中文会正常回退到系统字体。 */
@font-face {
  font-family: 'Pacifico';
  src: url('assets/Pacifico-Subset.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
/* 首屏大标题：站酷快乐体（圆润萌系展示体），文件在 assets/fonts/zcool-kuaile.ttf */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  src: url('assets/fonts/zcool-kuaile.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}

/* ---------- 基础 ---------- */
:root {
  /* ---- 暖调暗夜：中性色偏暖褐，和内容插画同体系 ---- */
  --blue: #F3A6C1;            /* 主点缀：樱粉 */
  --pink: #F3A6C1;            /* 旧名，同樱粉 */
  --mint: #E8CBA0;            /* 次级点缀：暖金 */
  --crt-bg: #14100d;          /* 页面底色 */
  --panel: #1d1814;           /* 卡片 / 面板底 */
  --ink: #f5f0e8;             /* 正文：暖白 */
  --ink-2: #a89c8e;           /* 次要文字：暖灰 */
  --line: rgba(255, 240, 222, .13);   /* 细线：暖调 */
  /* 全站只用一套字：拉丁走 DM Sans（本地文件），中文自动落到系统黑体。
     之前正文用霞鹜文楷、英文回退 Courier，中文楷体配英文等宽是最扎眼的冲突源，
     这次把正文和标题统一到同一条无衬线栈里，只有品牌名和首屏那一句保留书写体。 */
  --font-sans: 'DM Sans', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans',
               'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC',
               system-ui, -apple-system, sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  --font-script: 'Pacifico', cursive;      /* 只给品牌名 */
  --font-hand: 'STXingkai', '华文行楷', 'Xingkai SC', 'Kaiti SC',
               'STKaiti', 'KaiTi', '楷体', serif;  /* 只给首屏那句引文 */
  /* 字号阶梯 */
  --fs-h1: clamp(32px, 3.9vw, 54px);
  --fs-lead: 16px;
  --fs-body: 15px;
  --fs-sm: 13.5px;
  --fs-label: 11.5px;
  --header-h: 101px;
  --gutter: clamp(24px, 6.6vw, 95px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* 「缓慢推近」：首屏和作品页共用同一套时长 / 缓动，观感才是一套语言 */
  --push-dur: 30s;
  --push-ease: cubic-bezier(.35, .12, .35, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.nav-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--crt-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;          /* 中文黑体默认字距偏紧，给一点点 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* 柔和暗角：给全站一点电影感（无扫描线、无闪烁，不拦截点击） */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, .26) 100%);
  opacity: 1;
}

/* 纯色区底：一层极淡的中性顶光，给近黑一点纵深（无扫描线、无彩色辉光） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;                 /* 在 body 背景之上、所有内容之下 */
  pointer-events: none;
  /* 全站唯一的背景层：固定定位，所以不随区块重启、永远不可能出现接缝。
     只用中性白（没有任何色相），避免在暗底上被看成粉/紫。 */
  background:
    radial-gradient(130% 90% at 50% -12%, rgba(255, 246, 236, .045), transparent 58%),
    var(--crt-bg);
}

h1, h2, h3, h4, p, ul, dl { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 通用入场动效 */
/* 进场：位移 + 淡入。起始透明度不再从 0 起 —— 从全透明到实心，
   在暗底上观感就是「先黑一下再亮」，滚动时反复触发会显得页面在闪。
   从 .5 起既有淡入层次，又不会出现整块消失的空窗。 */
.reveal {
  opacity: .5;
  transform: translateY(14px);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 顶部导航 ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: transparent;
  z-index: 100;
  transition: height .3s var(--ease), background .3s ease,
              box-shadow .3s var(--ease), backdrop-filter .3s ease;
}
/* 首屏是浅色画面，顶部压一层极淡的暗部让白字可读 */
.header::before {
  content: '';
  position: absolute;
  inset: 0 0 -52px 0;          /* 比导航再多垂 52px，渐变才不会在字上就断掉 */
  background: linear-gradient(180deg,
    rgba(16, 12, 9, .70) 0%,
    rgba(16, 12, 9, .55) 40%,
    rgba(16, 12, 9, .30) 62%,
    rgba(16, 12, 9, 0) 100%);
  opacity: 1;
  transition: opacity .4s ease;
  pointer-events: none;
}
.header.is-solid::before { opacity: 0; }
.header.is-solid {
  height: 72px;
  background: rgba(20, 16, 13, .88);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, .5);
}


/* 作品视图：导航和首屏一样保持透明，顶部只压一档薄暗保证白字可读。
   这里用中性深色而不是底色那种暖褐 —— 六张作品图本身有冷有暖，
   暖调遮罩压在蓝色图上会发灰发浑，中性色对哪种图都安全。 */
body.view-products .header:not(.is-solid)::before {
  background: linear-gradient(180deg,
    rgba(10, 10, 11, .72) 0%,
    rgba(10, 10, 11, .54) 42%,
    rgba(10, 10, 11, .22) 76%,
    rgba(10, 10, 11, 0) 100%);
}

.header-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 10px; }

/* 品牌名：手写体（Pacifico），像签名一样，更有个性 */
.brand-text {
  color: #fff;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 0;              /* 手写体加字距会断开连笔，置零 */
  line-height: 1.15;
  padding: .1em 0 .16em;          /* Pacifico 上下伸部较高，留点余量避免被裁 */
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
  transition: font-size .3s var(--ease), color .3s ease;
}
.header.is-solid .brand-text {
  font-size: 22px;
  color: var(--ink);
  text-shadow: none;
}
.brand-text--lg { font-size: 40px; letter-spacing: 0; padding: .06em 0 .18em; }


.nav { display: flex; align-items: center; gap: clamp(18px, 2.7vw, 42px); }

.nav-item {
  position: relative;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  padding: 8px 0;
  opacity: .95;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .32);
  transition: opacity .3s ease, color .4s ease;
}
.nav-item::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-item:hover { opacity: 1; }
.nav-item:hover::after,
.nav-item.is-active::after { transform: scaleX(1); }

.header.is-solid .nav-item { color: var(--ink); text-shadow: none; }
.header.is-solid .nav-item::after { background: var(--blue); }
.header.is-solid .nav-toggle span { background: var(--ink); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 10px 8px;
  border: 0; background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .3s ease;
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- 首屏 ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--crt-bg);
}
@supports (height: 100svh) {
  .hero { height: 100svh; }
}

/* 首屏不再有闪烁的「开始」光标（终端元素已移除） */

.hero-media { position: absolute; inset: 0; }

/* 首屏的「压暗三层」——从下往上叠，最后一条在 DOM 里最先画：
   ① 顶部一条：给透明导航垫底，亮图上导航字才不至于糊掉
   ② 中间一团柔光暗角：主角，解决白字压不住浅色图的问题；椭圆比标题大一圈，
      落在图上像镜头的自然暗角，而不是一个生硬的方块
   ③ 底部渐隐到背景色，和下方"关于"纯色区无缝衔接
   随机图什么色调都有，这三层是唯一不依赖图片内容的稳妥办法（跨域图取不到像素，
   做不了按亮度动态调）。觉得图片被压得太暗/太亮，只改下面这几个 alpha 即可。 */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;              /* 必须在背景视频之上，否则渐隐会被视频盖掉 */
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(20, 16, 13, .52) 0%,
      rgba(20, 16, 13, .20) 10%,
      transparent 26%),
    radial-gradient(ellipse 74% 64% at 50% 50%,
      rgba(18, 14, 11, .46) 0%,
      rgba(18, 14, 11, .34) 46%,
      rgba(18, 14, 11, .12) 74%,
      transparent 92%),
    linear-gradient(to bottom,
      transparent 0%,
      transparent 62%,
      rgba(20, 16, 13, .55) 86%,
      var(--crt-bg) 100%);
}

/* 单页首屏：静态图 + 极缓推近，不再轮播
   用 transition 而不是 animation —— animation 在 display:none 切回来会从头重放，
   每次从作品页回首页，图都会「闪一下再重新放大」 */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s ease-out, transform var(--push-dur) var(--push-ease);
  will-change: opacity, transform;
}
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1.11) translate3d(-1%, -.6%, 0);
}

/* ===== 首屏背景视频（可选） =====
   由 app.js 在「未开启减弱动效 + 非省流量 + 配置了 data-hero-video」时动态插入（桌面与手机一致），
   叠在 .hero-slide 静态图之上，出帧后才淡入。没配视频时这个元素根本不存在。
   任何一步失败都保持 opacity:0 —— 画面退回原来的静态图，不会黑屏。 */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;              /* 图(0) < 视频(1) < 底部渐隐(2) */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .3s ease-out;
  pointer-events: none;
  background: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.hero-video.is-ready { opacity: 1; }

/* 视频接管后静态图只当底衬，停掉 30 秒的推近动画（省掉一层持续重绘） */
.hero-media.has-video .hero-slide {
  transform: none;
  transition: opacity .8s ease-out;
}

/* 用户手动 opened 减弱动效时也不播（与本文件其它动效的处理保持一致） */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* 开放的霓虹标题区：不再用黑框卡片，文字直接浮在 CRT 屏上，
   背后一块模糊柔光暗角托住可读性（避免硬黑框，也不压住背景图） */
.mission {
  position: absolute;
  /* 居中用 left/right:0 + margin auto，不用 left:50% + translateX：
     绝对定位的 shrink-to-fit 会把可用宽度算成「容器宽 - left」，手机会被挤窄 */
  top: 50%;
  left: 0;
  right: 0;
  /* 高于 .hero-video(1) 与 .hero-media::after(2)，否则标题被视频盖住 */
  z-index: 3;
  margin-inline: auto;
  /* 宽度跟着句子走：fit-content 让短句该多宽就多宽（一行放得下就一行），
     max-width 兜住长句 —— 一行约 10 个字，接口限长 18 字，最多两行排完 */
  width: fit-content;
  max-width: clamp(320px, 42vw, 600px);
  padding: 0;
  text-align: center;
  isolation: isolate;
  opacity: 0;
  transform: translateY(calc(-50% - 18px));
  transition: opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s;
}
.mission.is-run { opacity: 1; transform: translateY(-50%); }
/* 文字后方的柔光暗角（背景框）已去掉，改由标题自身的柔和投影保证可读性 */

/* 标题顶部的「一言」小标签已删除（用户要求），.mission-label 规则一并清掉；
   整块改成竖向居中后，标题不再需要额外的上留白，margin-top 归零更居中 */

.mission-title {
  /* 手写体：优先华文行楷，其次楷体，非 Windows 回退霞鹜文楷 */
  font-family: var(--font-hand);
  font-weight: 400;             /* 手写字体一般只有常规体，避免合成加粗失真 */
  margin-top: 0;
  font-size: clamp(30px, 3.6vw, 48px);   /* 固定字号，句子长了自然换行，不再缩放 */
  line-height: 1.4;
  letter-spacing: 0;            /* 手写体本身字面就松，再加字距反而让短句卡在换行临界点 */
  color: #fff;
  /* 四层投影：贴身暗晕勾轮廓 → 剥离 → 大范围压暗，亮底图上也能读 */
  text-shadow:
    0 0 2px rgba(0, 0, 0, .50),
    0 1px 2px rgba(0, 0, 0, .90),
    0 2px 10px rgba(0, 0, 0, .60),
    0 6px 34px rgba(0, 0, 0, .45);
}
/* 出处：单独一行小字，白字（原来用樱粉）；靠右落款，没有出处时不占位。
   右边界由 app.js 的 alignFrom() 按标题最后一行实测补 margin-right，
   所以这里只需保证「不折行」，让它永远单行贴住句尾 */
.mission-from {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.3vw, 19px);   /* 原本 13~16px，整体调大一档 */
  letter-spacing: .04em;
  text-align: right;
  white-space: nowrap;
  color: #fff;
  /* 落款字号小，同样需要贴身那一层，否则在浅色画面上比标题更容易消失 */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .85),
    0 2px 9px rgba(0, 0, 0, .55);
}
.mission-from:empty { display: none; }

/* 标题改为自然的淡入上浮（由 .mission 的过渡负责），不再逐字打印 / 闪烁光标 */

/* ---------- 关于我们（一屏 · 一图） ---------- */
.about {
  position: relative;
  display: flex;
  align-items: center;
  /* 一屏，但给个上限：1440 宽的大屏上若硬撑 100vh，内容只占中间一条，
     上下会空出两三百像素。880px 以内保持满屏感，超了就收紧。 */
  min-height: 880px;
  min-height: min(100svh, 880px);
  padding: clamp(88px, 9.5vh, 120px) 0 clamp(52px, 6.5vh, 84px);
  overflow: hidden;
  /* 背景不在这里画：关于 / 大事记 / 页脚三块共用下面「统一区块氛围」同一条规则 */
  /* 不加 scroll-margin：点「关于我们」正好停在这一屏的顶边，
     顶部 117px 是留白，固定导航压在上面也不会盖到字 */
  scroll-margin-top: 0;
}

.about-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* 右栏略大于左栏：机身要够大才有存在感，左栏靠数据块把体量补上 */
  grid-template-columns: 1fr 1.14fr;
  align-items: center;
  gap: clamp(30px, 4.2vw, 76px);
  width: 100%;
}
/* 错位：文字不动，相纸整块下压，两者不在同一条中线上。
   用 position+top 而不是 transform —— 相纸挂着 .reveal，会互相覆盖。 */
.about-inner > section {
  position: relative;
  top: 0;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .38em;
  font-weight: 500;
  margin-bottom: 22px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  color: var(--mint);            /* 暖金 */
}

.sec-title {
  font-family: var(--font-sans);
  font-weight: 500;               /* 中文黑体在常规体下偏轻，500 更稳 */
  font-size: var(--fs-h1);
  line-height: 1.28;
  letter-spacing: -.005em;        /* 大字号中文略收紧才不散 */
  color: var(--ink);
}
.sec-title .muted {
  display: block;
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: 0;
}

.about-lead {
  margin-top: 26px;
  max-width: 500px;
  font-size: var(--fs-lead);
  line-height: 1.8;              /* 桌面端断成两行，1.95 会松得像两个段落 */
  color: var(--ink-2);
}

/* 数据块：一眼看出是几个人的作坊，不是大公司。
   原来是一行小字横着排，左半边空得很；改成 2×2 的格子，体量顶上来，
   数字单独一行放得很大，扫一眼就有信息量。 */
.about-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;                                  /* 用 1px 的缝当分割线 */
  margin-top: clamp(28px, 3vw, 38px);
  max-width: 430px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.about-meta li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 16px 18px;
  background: rgba(255, 246, 236, .022);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
  transition: background .3s ease;
}
.about-meta li:hover { background: rgba(255, 246, 236, .045); }
.about-meta b {
  font-family: var(--font-sans);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--blue);
}

.about-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(28px, 3vw, 40px);
  padding: 11px 22px;
  border: 1px solid rgba(243, 166, 193, .38);
  border-radius: 999px;
  background: rgba(243, 166, 193, .05);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--blue);
  transition: gap .3s var(--ease), background .3s ease, border-color .3s ease;
}
.about-link:hover {
  gap: 15px;
  background: rgba(243, 166, 193, .12);
  border-color: rgba(243, 166, 193, .8);
}

/* ------------------------------------------------------------
   关于区配图：三张拍立得叠放，各自缓慢摇摆
   摇摆挂在 .pola__card、hover 位移挂在 .pola —— 分两层，动画跑动时
   hover 才不会被关键帧覆盖。中间那张里放视频（data-src / data-hls）。
   ------------------------------------------------------------ */
.about-stack {
  position: relative;
  display: block;
  margin: 0;
  justify-self: center;
  width: min(100%, 380px);
  aspect-ratio: 1 / 1.16;
  /* 视觉重心补偿：三张的 translate 不对称（左 -20%、右 +18%）加上旋转，
     整组包围盒会整体偏左，往右推 22px 才是相对右栏真的居中 */
  left: 22px;
  /* 整组是一个链接（点哪儿都随机进一个站），所以要把 a 的默认样式清掉 */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.about-stack:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 12px;
  border-radius: 6px;
}
/* 能点的暗示：鼠标移上去，相纸下沿那行小字加深一档 */
.about-stack:hover .pola__cap { color: #453e33; }

/* 矮屏按高度收一档：相纸这组偏高，不收会顶出视口 */
@media (max-height: 780px) {
  .about-stack { width: min(100%, 380px, 43vh); }
  /* 上下留白同步收，否则底部按钮卡在折线下半截 */
  .about { padding-top: 44px; padding-bottom: 30px; }
}

/* 外层：只负责 hover 的额外位移，不吃动画 */
.about-stack .pola {
  position: absolute;
  inset: 0;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.about-stack .pola--1 { z-index: 1; }
.about-stack .pola--2 { z-index: 3; }
.about-stack .pola--3 { z-index: 2; }

/* 内层：相纸本体 + 摇摆动画 */
.about-stack .pola__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 11px 11px 0;
  border-radius: 2px;
  background: linear-gradient(165deg, #f7f2e6 0%, #eee8da 60%, #e2dbca 100%);
  box-shadow:
    0 1px 2px rgba(38, 24, 12, .36),
    0 10px 22px rgba(38, 24, 12, .34),
    0 26px 54px rgba(0, 0, 0, .32);
  transform-origin: 50% 90%;
  transition: box-shadow .5s ease;
}

/* 相纸里那块画面 */
.about-stack .pola__frame {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 1px;
  background: #cdc4b2;
  box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .18);   /* 相纸边缘那点压痕 */
}
.about-stack .pola__frame img,
.about-stack .about-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-stack .pola__frame img { transition: transform 1.4s var(--ease); }
/* 相纸里的图来自外部随机接口，风格不受控：统一压一点饱和度、加一层极淡暖调，
   让它们落进全站的暖褐暗调里，而不是三块各自发光的高饱和色块（可整条删掉还原） */
.about-stack .pola__frame img { filter: saturate(.9) sepia(.14) contrast(1.02); }

/* 视频：出帧才淡入。加载中 / 失败 / 被降级时露出的都是下面的静帧 */
.about-stack .about-media__video {
  opacity: 0;
  transition: opacity .32s ease;
}
.about-stack .about-media__video.is-ready { opacity: 1; }

/* 相纸下沿的留白：拍立得那个特征，写一行小字 */
.about-stack .pola__cap {
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  font-family: var(--font-script);
  font-size: 15px;
  letter-spacing: .02em;
  color: #6d6455;
}

/* ---- 三张各自的初始角度，也是 sway 的起止帧 ---- */
/* 左边这张只露出一条窄边，caption 居中会被中间那张压住、只剩一条空白相纸；
   把它挪到自己的左边缘，正好落在露出来的位置，三张的字就都能读到 */
.about-stack .pola--1 .pola__cap {
  justify-items: start;
  padding-left: 15px;
}
.about-stack .pola--1 .pola__card {
  transform: rotate(-7deg) translate(-20%, 7%);
  animation: polaSway1 9s ease-in-out infinite;
}
.about-stack .pola--2 .pola__card {
  transform: rotate(1.2deg) translate(2%, -4%);
  animation: polaSway2 11s ease-in-out infinite;
}
.about-stack .pola--3 .pola__card {
  transform: rotate(7.5deg) translate(18%, 8%);
  animation: polaSway3 10s ease-in-out infinite;
}

/* 摇摆幅度压得很小（1~2 度），只是让这叠纸别像贴图一样死着 */
@keyframes polaSway1 {
  0%, 100% { transform: rotate(-7deg)   translate(-20%, 7%); }
  50%      { transform: rotate(-5.4deg) translate(-20%, 5.2%); }
}
@keyframes polaSway2 {
  0%, 100% { transform: rotate(1.2deg) translate(2%, -4%); }
  50%      { transform: rotate(2.6deg) translate(2%, -6%); }
}
@keyframes polaSway3 {
  0%, 100% { transform: rotate(7.5deg) translate(18%, 8%); }
  50%      { transform: rotate(5.9deg) translate(18%, 9.8%); }
}

/* hover：左右两张再往外翻开一点，中间那张微微上浮 */
.about-stack:hover .pola--1 { transform: rotate(-4deg) translate(-5%, 3%); }
.about-stack:hover .pola--2 { transform: translate(0, -1.6%); }
.about-stack:hover .pola--3 { transform: rotate(4deg) translate(4.6%, 3.4%); }
.about-stack:hover .pola--2 .pola__card {
  box-shadow:
    0 2px 4px rgba(38, 24, 12, .38),
    0 16px 32px rgba(38, 24, 12, .38),
    0 36px 70px rgba(0, 0, 0, .38);
}

/* 系统开了「减少动态效果」：停在各自的角度上，不再晃 */
@media (prefers-reduced-motion: reduce) {
  .about-stack .pola__card { animation: none; }
  .about-stack .pola { transition: none; }
}

/* ---------- 区块标题 ---------- */
.sec-head { margin-bottom: clamp(30px, 3.2vw, 52px); }
.sec-head .eyebrow { margin-bottom: 18px; }

/* ---------- 大事记：横向时间轴 ---------- */
/* 仿原站：一条横线串起年份节点，当前节点放大填充，上方一张卡片跟着节点横向滑动 */
.history {
  position: relative;
  padding: clamp(64px, 6vw, 104px) 0 clamp(72px, 6.6vw, 112px);
  scroll-margin-top: 72px;
}

.tl {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 卡片铺满整行：原来固定 400px 靠左，右边一大片全空。
   现在宽度拉满、内部左右分栏 —— 左边一个超大的年份当锚点，
   右边才是标题和正文，横向这几百像素就吃满了。
   （JS 里 place() 会把 --x 夹在「容器宽 - 卡片宽」之间，卡片铺满后恒为 0，不用改脚本。） */
.tl-card {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: clamp(150px, 14vw, 186px);
  display: flex;
  align-items: center;                      /* 内容少时在卡片里居中，不堆在顶上 */
  padding: clamp(28px, 2.8vw, 40px) clamp(26px, 3.4vw, 54px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .48);
  transform: translateX(var(--x, 0px));
  transition: transform .72s var(--ease);
  overflow: hidden;
}
/* 右上角序号：卡片拉满后右边会空一大截，这个当作对角锚点 */
.tl-idx {
  position: absolute;
  top: clamp(22px, 2.4vw, 34px);
  right: clamp(24px, 3.2vw, 50px);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 246, 236, .26);
}
/* 左沿那道竖线 = 当前节点 */
.tl-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: clamp(24px, 3vw, 46px);
  bottom: clamp(24px, 3vw, 46px);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), rgba(243, 166, 193, 0));
}
.tl-card-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(140px, 196px) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
  transition: opacity .18s ease;
}
.tl-card.is-swapping .tl-card-inner { opacity: .4; }

/* 年份：从 13px 的小标签变成整张卡片的视觉锚点，跨两行 */
.tl-date {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-sans);
  font-size: clamp(46px, 5.2vw, 78px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.035em;
  color: rgba(232, 203, 160, .78);   /* 暖金，压淡一点不抢标题 */
  font-variant-numeric: tabular-nums;
}
.tl-card h3 {
  grid-column: 2;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(21px, 1.95vw, 29px);
  letter-spacing: -.005em;
  line-height: 1.42;
  color: var(--ink);
}
.tl-desc {
  grid-column: 2;
  margin-top: 12px;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.95;
  color: var(--ink-2);
}

/* 空年份的卡片：字淡下去，像笔记本里还没填的格子 */
.tl-card.is-empty h3 {
  color: var(--ink-2);
  letter-spacing: .22em;
}
.tl-card.is-empty .tl-desc { color: rgba(168, 156, 142, .7); }
.tl-card.is-empty .tl-date { color: rgba(232, 203, 160, .3); }
.tl-card.is-empty::before { opacity: .4; }

.tl-rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: clamp(30px, 3.4vw, 46px);
  /* 卡片已经铺满整行，时间轴也跟着拉到头，两头不再内缩 */
  padding: 0 2px;
}
/* 贯穿的那根细线，两端渐隐 */
.tl-rail::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 7px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 246, 236, .03),
    rgba(255, 246, 236, .22) 10%,
    rgba(255, 246, 236, .22) 90%,
    rgba(255, 246, 236, .03));
}

.tl-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color: inherit;
}

.tl-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--crt-bg);
  border: 1.5px solid rgba(255, 246, 236, .28);
  /* 用一圈暗把横线在圆点处断开 */
  box-shadow: 0 0 0 7px var(--crt-bg);
  transition: transform .55s var(--ease), background .45s ease,
              border-color .45s ease, box-shadow .45s ease;
}
.tl-node:hover .tl-dot { border-color: var(--blue); }
.tl-node.is-active .tl-dot {
  background: var(--blue);
  border-color: var(--blue);
  transform: scale(1.5);
  box-shadow: 0 0 0 7px var(--crt-bg), 0 0 0 12px rgba(243, 166, 193, .22);
}

.tl-year {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  transition: color .4s ease;
}
.tl-node:hover .tl-year { color: var(--ink); }
.tl-node.is-active .tl-year { color: var(--blue); }

/* ---------- 视图切换：主页（首屏 / 关于我们 / 大事记）与作品页互斥 ---------- */
body:not(.view-home) .hero,
body:not(.view-home) .about,
body:not(.view-home) .history { display: none; }
body:not(.view-products) .products { display: none; }

/* 作品页只有作品：页脚整块不出现 */
body.view-products .footer { display: none; }


/* ---------- 作品 ---------- */
.products {
  position: relative;
  background: var(--crt-bg);
}

.product-list { position: relative; }

/* 一屏一件作品：滚一格直接吸附到下一屏，而不是慢慢拖过去
   窄屏是上下堆叠的卡片，不能吸，所以只在桌面宽度开 */
@media (min-width: 901px) {
  /* 只在作品视图吸附；首页挂着这条会限制任何自由滚动位置 */
  html:has(body.view-products) { scroll-snap-type: y mandatory; }
  .product { scroll-snap-align: start; }
}

.product {
  position: relative;
  height: 100svh;
  scroll-margin-top: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #100d0a;
}

/* 外层只负责视差位移（JS 逐帧写 transform），内层负责「和首屏一样」的缓慢推近 */
.product-bg {
  position: absolute;
  inset: -8% 0;              /* 上下各多留 8%，给视差留位移空间 */
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity .26s ease-out;
}
.product.is-in .product-bg { opacity: 1; }

.product-bg-img {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: var(--bg-pos, center);
  /* 只留一点静态余量，防视差位移时露边。原来的 30 秒推近动画已去掉：
     满屏大图逐帧缩放，滚动时和视差一起抢合成线程，手感发涩 */
  transform: scale(1.04);
}

/* 只在文字这一侧压一层，迅速收干净：右边插画保持原本的亮度 */
.product::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(10, 10, 11, .88) 0%,
    rgba(10, 10, 11, .82) 16%,
    rgba(10, 10, 11, .62) 27%,
    rgba(10, 10, 11, .38) 38%,
    rgba(10, 10, 11, .16) 48%,
    rgba(10, 10, 11, .04) 57%,
    rgba(10, 10, 11, 0) 64%);
}



.product-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  padding-left: var(--gutter);
  padding-right: 24px;
}

/* 作品名：中文名做主标题，英文名压小字距拉开衬在下面 */
.product-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 16px);
  opacity: .5;
  transform: translateY(14px);
  transition: opacity .42s var(--ease) .04s, transform .42s var(--ease) .04s;
}

/* 作品序号：01 ——— 小标签，给大字打一个节奏 */
.product-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  font-family: var(--font-sans);
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 700;
  letter-spacing: .24em;
  color: rgba(255, 246, 236, .7);
  opacity: .5;
  transform: translateY(14px);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.product-index i {
  display: block;
  width: clamp(24px, 2.4vw, 34px);
  height: 1px;
  background: var(--accent-light, #F3A6C1);
}

/* 中文名：超大号得意黑，白色里扫过一道产品主色 */
.product-name-cn {
  display: inline-block;         /* 收成文字宽度，渐变和高亮条才贴合字身 */
  font-family: var(--font-sans);
  font-size: clamp(58px, 7.2vw, 104px);
  font-weight: 500;              /* 和区块大标题同一个字重，超大字号下 400 会显得虚 */
  line-height: 1.04;
  letter-spacing: .01em;
  color: #fff;                   /* 不支持渐变裁剪时的兜底 */
  text-shadow: 0 8px 34px rgba(0, 0, 0, .4);
  position: relative;            /* ::before 高亮条以它为定位基准 */
}
/* 字脚压一条斜的主色带，像用荧光笔划了一道 */
.product-name-cn::before {
  content: '';
  position: absolute;
  left: -.06em;
  right: -.04em;
  bottom: -.02em;    /* 压到字脚以下，才像荧光笔划过，不像删除线 */
  height: .2em;
  /* 白色高亮条：不随作品换色，压在任何背景上都看得见 */
  background: #fff;
  opacity: .16;
  transform: skewX(-10deg) rotate(-1.2deg);
  border-radius: 2px;
  pointer-events: none;
  z-index: -2;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .product-name-cn {
    background-image: linear-gradient(100deg,
      #ffffff 0%,
      #ffffff 16%,
      var(--accent-light, var(--accent, #F3A6C1)) 30%,
      #ffffff 44%,
      #ffffff 58%,
      var(--accent-light, var(--accent, #F3A6C1)) 72%,
      #ffffff 86%,
      #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    background-size: 300% 100%;
    background-position: 0% 50%;
    /* 光晕跟着作品主色走，白字压在亮插画上也能立住 */
    filter: drop-shadow(0 10px 34px rgba(var(--accent-rgb, 10, 14, 22), .42));
  }
}
/* 只让当前这一屏的字流动：主色像光一样从字面上慢慢扫过 */
.product.is-current .product-name-cn {
  animation: titleFlow 9s ease-in-out infinite alternate;
}
@keyframes titleFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* 英文前面一根短线，和上面序号那条形成呼应 */
.product-name em::before {
  content: '';
  display: block;
  width: clamp(20px, 2vw, 30px);
  height: 1px;
  background: var(--accent-light, #F3A6C1);
  opacity: .8;
}

.product-name em {
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: clamp(12px, .86vw, 13.5px);
  font-weight: 500;
  letter-spacing: .38em;
  text-indent: .1em;
  text-transform: uppercase;
  color: rgba(255, 246, 236, .62);
  text-shadow: none;
}

.product-desc {
  margin-top: 20px;
  max-width: 340px;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 246, 236, .84);
  opacity: .5;
  transform: translateY(14px);
  transition: opacity .42s var(--ease) .08s, transform .42s var(--ease) .08s;
}
.product-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 15.5px;
  color: var(--pink);
  opacity: .5;
  transform: translateY(14px);
  transition: opacity .42s var(--ease) .12s, transform .42s var(--ease) .12s,
              gap .3s var(--ease);
  /* 整段地址同色同亮度，协议和域名不做深浅区分；nowrap 防止窄屏折行 */
  white-space: nowrap;
}
.product-link:hover { gap: 14px; }

.product.is-in .product-index,
.product.is-in .product-name,
.product.is-in .product-desc,
.product.is-in .product-link {
  opacity: 1;
  transform: none;
}

/* 切到下一个作品时的「开机」过场：内容上浮归位，每次成为当前屏都会重放。
   这里刻意不做透明度动画 —— 原来从 opacity:0 + blur(5px) 起步，切屏时整块内容
   先消失再浮现，滚动着看就是页面一会儿黑一会儿亮。只留位移和极小缩放，
   动感还在，但任何一帧都不会出现「内容不见了」的空窗。 */
.product.is-current .product-inner {
  animation: workBoot .5s var(--ease) both;
}
@keyframes workBoot {
  0%   { transform: translateY(20px) scale(.992); }
  100% { transform: none; }
}

/* CRT 刷新感：一道扫描线横扫过屏，落到新作品时触发一次。
   原来是 38% 高、末端 38% 白，切屏时等于闪一下强光；压到 22% 高、14% 白，
   只留一层几乎察觉不到的扫光，不再是「一会儿亮一下」。 */
.product::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 22%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 246, 236, .04) 74%,
    rgba(255, 246, 236, .14) 100%);
  opacity: 0;
}
.product.is-current::before {
  animation: scanSweep .8s ease-out 1;
}
@keyframes scanSweep {
  0%   { transform: translateY(-110%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(265%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .product.is-current .product-inner { animation: none; }
  .product.is-current::before { animation: none; }
}

/* 右侧竖向快速导航 */
.product-rail {
  position: fixed;
  isolation: isolate;
  right: clamp(16px, 6.6vw, 95px);
  top: 50%;
  transform: translateY(-50%) translateX(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, transform .5s var(--ease), visibility .5s;
}
.product-rail.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.rail-item {
  position: relative;
  width: 36px; height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: .88;
  transition: opacity .2s ease-in-out;
}
.rail-item span {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent, #F3A6C1);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 0 0 2px rgba(255, 246, 236, .96), 0 6px 18px rgba(0, 0, 0, .46);
  transform: scale(1);
  transition: transform .2s ease-in-out;
}
.rail-item:hover { opacity: 1; }
.rail-item:hover span { transform: scale(1.12); }
.rail-item.is-active { opacity: 1; }
/* 原站就是这个比例：1.5 倍，布局尺寸不动，所以不会挤到旁边 */
.rail-item.is-active span { transform: scale(1.5); }
.rail-item.is-active:hover span { transform: scale(1.56); }

/* 悬浮作品名 tooltip */
.rail-item::after {
  content: attr(data-name);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink);
  background: rgba(20, 16, 13, .92);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--ease);
}
.rail-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ---------- 页脚 ---------- */
/* 暗底 + 一根霓虹分割线：整块 CRT 暗屏，霓虹只留给 hover 和品牌位 */
.footer {
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 6.6vw, 84px) 0 26px;
}

/* =========================================================
   关于 / 大事记 / 页脚都不自画背景，整页只由 body::before 一层固定
   背景提供，避免各区块渐变在交界处出现色阶断层
   ========================================================= */
.footer .brand-text { color: var(--ink); text-shadow: none; }
.footer-main {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 3vw, 48px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.footer-brand-line { display: inline-flex; align-items: center; gap: 12px; }

.footer-brand p {
  margin-top: 20px;
  font-size: 15px;
  color: var(--ink-2);
  letter-spacing: .06em;
}

/* 现在只有「友情链接」一列，靠右收边 */
.footer-cols {
  display: grid;
  grid-template-columns: minmax(150px, max-content);
  justify-content: end;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-size: 14.5px;
  line-height: 2.15;
  white-space: nowrap;
  color: var(--ink-2);
  width: fit-content;
  transition: color .3s ease, transform .3s var(--ease);
}
.footer-col a:hover { color: var(--blue); transform: translateX(3px); }
.footer-empty {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

.footer-bottom {
  display: flex;
  /* 原来是 space-between（左一句、右一句顶到两端），改成整行居中 */
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .footer-main { grid-template-columns: 1fr; }
  /* 竖排时友链靠左，不要被 justify-end 顶到右边 */
  .footer-cols { justify-content: start; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }

  .header.is-solid { height: 60px; }
  .nav-toggle { display: block; }

  /* 手写体在小屏容易压到右边汉堡，稍微收一档 */
  .brand-text { font-size: 25px; }
  .header.is-solid .brand-text { font-size: 22px; }

  .nav {
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--panel);
    padding: 8px 0 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, transform .35s var(--ease), visibility .35s;
  }
  /* 只有三项了，菜单按内容自适应高度，不再铺满整屏 */
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    height: auto;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0 0 20px 20px;
  }
  .nav-item {
    width: 100%;
    padding: 16px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink);
    font-size: 16px;
    opacity: 1;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
  }
  .nav-item::after { display: none; }
  .nav-item.is-active { color: var(--blue); }

  /* 已经居中悬浮，不用再给右侧汉堡留空；短句仍然按内容收缩 */
  .mission { width: fit-content; max-width: min(84vw, 460px); }
  .hero-slide { background-position: 70% center; }

  /* 竖屏是「文字 + 图」上下叠，塞不满一屏时就让它自己长高，别裁内容 */
  .about {
    height: auto;
    min-height: 100svh;
    padding: 104px 0 64px;
  }
  .about-inner {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 44px);
  }
  .about-inner > section { top: 0; }
  /* 单列时整组相纸缩一号：三张散开后的总宽约是单张的 1.55 倍，
     350px 会顶出窄屏，收到 240px 正好落在正文栏里 */
  .about-stack { width: min(100%, 195px); left: 0; margin: 10px 0 6px; }
  .about-stack .pola__cap { flex: 0 0 30px; font-size: 12.5px; }
  .about-lead { max-width: 100%; }

  .product {
    height: auto;
    display: block;
    padding-bottom: 40px;
    background: var(--crt-bg);
  }
  .product + .product { border-top: 1px solid var(--line); }

  /* 竖屏改成图在上、字在下，深色遮罩会盖住文字区，这里关掉 */
  .product::after { display: none; }
  .product-bg {
    position: relative;
    inset: auto;
    height: 62vw;
    min-height: 260px;
    overflow: hidden;
    opacity: 1;
    transform: none !important;
  }
  /* 竖屏是一张很宽的图被裁成一条，推近会糊，直接关掉动画与压暗 */
  .product-bg-img {
    background-position: center 30%;
    filter: none;
    transform: scale(1.02);
    animation: none;
  }
  .product-inner {
    max-width: 100%;
    padding: 28px var(--gutter) 0;
  }
  .product-index { color: #9d9187; }
  .product-index i { background: var(--accent); }

  /* 竖屏是浅底，大标题换成「深墨 → 产品主色」的渐变 */
  .product-name-cn {
    font-size: clamp(46px, 13vw, 64px);
  }
  /* 浅底上白色高亮条看不见，换成淡淡的主题色 */
  .product-name-cn::before { background: var(--accent); opacity: .16; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .product-name-cn {
      background-image: linear-gradient(104deg,
        #ffffff 6%,
        var(--accent, #F3A6C1) 56%,
        #ffffff 96%);
      filter: none;
    }
  }
  .product-name { color: var(--ink); }
  .product-name em { color: var(--ink-2); }
  .product-desc { max-width: 100%; color: var(--ink-2); }
  .product-link { color: var(--blue); }
  .product-rail { display: none; }

  body.view-products .products { padding-top: 60px; }

  .history { padding: 64px 0 72px; }
}

/* 窄屏：数据块铺满整行，格子保持等宽（旧版「两列 auto」的规则会把新网格压扁） */
@media (max-width: 620px) {
  .about-meta {
    max-width: 100%;
    width: 100%;
    font-size: var(--fs-sm);
  }
  .about-meta li { padding: 14px 15px; }
  .about-meta b { font-size: 26px; }

  .mission {
    width: fit-content;
    max-width: min(84vw, 440px);
    padding: 0 20px;                  /* 左右留白对称，居中才不会偏 */
    border-radius: 0 0 58px 0;
  }
  /* 小屏字号再收一档，保证 16 字的句子也在两行内排完（30px 太占宽度） */
  .mission-title { margin-top: 0; font-size: clamp(26px, 7.2vw, 34px); }
  .sec-title { font-size: 26px; }
  .product-bg { height: 66vw; }
  .history { padding: 48px 0 56px; }
  .footer-col a { font-size: 14px; }
  .footer-bottom { font-size: 12px; }

  /* 时间轴卡片：两栏在窄屏会把正文挤成一条，改成上下排（年份在上当标题） */
  .tl-card {
    min-height: 0;
    padding: 26px 22px 28px;
    align-items: flex-start;
  }
  .tl-card-inner {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .tl-date {
    grid-column: 1;
    grid-row: auto;
    font-size: 40px;
    margin-bottom: 6px;
  }
  .tl-card h3,
  .tl-desc { grid-column: 1; }
  .tl-desc { margin-top: 10px; font-size: 14px; }
  .tl-idx { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   黑白电视模式（整段删掉即回到纯彩色）
   <html class="theme-bw"> 开启：fixed 去色叠层 + 暗角 + 下滑亮带
   ========================================================= */
.bw-toggle {
  position: fixed;
  left: 16px; bottom: 16px;     /* 原来 16px，抬高一点，别贴着屏幕下沿 */
  z-index: 300;                 /* 在去色叠层(205)之上，按钮本身保持可点可读 */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-2);          /* 默认低调，不抢画面 */
  background: rgba(15, 12, 9, .72);
  border: 1px solid rgba(255, 246, 236, .14);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .2s var(--ease);
}
.bw-toggle:hover { transform: translateY(-1px); color: var(--ink); border-color: rgba(255, 246, 236, .3); }
.bw-toggle__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue);      /* 彩色模式下是霓虹绿，切到黑白变白 */
  box-shadow: 0 0 7px var(--blue);
  transition: background .3s ease, box-shadow .3s ease;
}
.bw-toggle__text { white-space: nowrap; }

/* 去色叠层：默认透明且无 filter（彩色模式完全不受影响） */
.bw-overlay {
  position: fixed;
  inset: 0;
  z-index: 205;                 /* 在扫描线(200)之上，整屏画面都在它底下被去色 */
  pointer-events: none;         /* 不拦截点击，底下内容照常可点 */
  /* 老电视观感：中心一抹冷白辉光（点亮的显像管）+ 四周轻暗角，避免"死灰"
     暗角原来压到 30%，页面上下两端的字会被压灰；收到 14% 只留氛围感 */
  background:
    radial-gradient(ellipse at center, rgba(255, 246, 236, .055) 0%, rgba(255, 246, 236, 0) 55%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .18) 100%);
  opacity: 0;
  transition: opacity .45s ease;
}
/* 缓慢下滑的同步亮带，老电视特有的垂直滚动感 */
.bw-overlay::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -30%;
  height: 26%;
  background: linear-gradient(180deg,
    transparent 0%, rgba(255, 246, 236, .05) 50%, transparent 100%);
  animation: tvRoll 7s linear infinite;
}
@keyframes tvRoll {
  from { transform: translateY(0); }
  to   { transform: translateY(460%); }
}

/* 开启黑白模式：去色 + 极轻提对比，不再加亮。
   原来写 contrast(1.22) brightness(1.06)：亮部被推到纯白、中间调被压平，
   压在照片上的白字（首屏一言、作品名）几乎看不见，正文小字也发灰；
   去掉 brightness 后亮部不再爆白，对比只留 1.12 把去色后发灰的主色字拉回来 */
html.theme-bw .bw-overlay {
  opacity: 1;
  /* 只留一点点提对比（1.12）：去色后原先靠颜色区分的主色文字会掉成中灰，
     轻微提对比能把它们拉回来；不能再叠 brightness，否则亮部照片会把白字吞掉 */
  backdrop-filter: grayscale(1) contrast(1.12);
  -webkit-backdrop-filter: grayscale(1) contrast(1.12);
}
/* 黑白下去掉色彩对比，压在照片上的白字靠更实的投影才站得住（仅黑白模式，彩色不受影响） */
html.theme-bw .mission-title {
  text-shadow:
    0 2px 10px rgba(0, 0, 0, .78),
    0 0 32px rgba(0, 0, 0, .62),
    0 1px 3px rgba(0, 0, 0, .55);
}
html.theme-bw .mission-from {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .85), 0 0 22px rgba(0, 0, 0, .65);
}
html.theme-bw .product-name-cn { text-shadow: 0 8px 34px rgba(0, 0, 0, .62); }
/* 兜底：万一浏览器不支持 backdrop-filter，至少把照片去色（不再叠 contrast，避免和叠层叠加两次） */
html.theme-bw .hero-slide,
html.theme-bw .hero-video,
html.theme-bw .product-bg-img,
html.theme-bw .about-stack img,
html.theme-bw .about-stack video { filter: grayscale(1); }
html.theme-bw .bw-toggle { color: #fff; border-color: rgba(255, 246, 236, .45); }
html.theme-bw .bw-toggle__dot { background: #fff; box-shadow: 0 0 8px rgba(255, 246, 236, .7); }

/* 窄屏：开关挪到右下角，同时给页脚让出这条底边，
   否则「Copyright ... All Rights Reserved」这行会正好被胶囊压住（实测 390px 会盖住右半句）。 */
@media (max-width: 620px) {
  .bw-toggle {
    left: auto; right: 14px; bottom: 12px;
    /* 这个位置会压在相纸上：底色加实 + 背景模糊，别让按钮在照片上糊成一块 */
    background: rgba(20, 16, 13, .84);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 6px 10px;
    font-size: 11px;
  }
  .footer { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-overlay::before { animation: none; display: none; }
}