/* ============================================================
   experiments.css · Experiments 页专属样式（仅 /experiments/ 加载）
   ------------------------------------------------------------
   主题：A 浅底（--c-paper），不改任何全站公共 CSS / 导航 / 汉堡。
   排版：规则对齐网格。上方一行 4 格各跨 3 列、下方一行 3 格各跨
   4 列；等宽同位、零错落，用户确认「4 上 3 下不变」。
   形状：上排前三项正圆；第 4 项 rect path link 为直角方形（无圆角）；
   下排三项为直角 16:9 矩形。

   第三轮修正：
   · 取消分区标题（01 / Loops 等）、编号 eyebrow、统计与说明小字；
     标签只显示无 .mp4 后缀的文件名。
   · 删除公共 .frame 的 1px 描边（本页作用域覆盖为 border: 0）。
   · 移动端整项取消：本文件不含任何窄屏断点、触摸或移动端分支。

   第四轮修正（与 Home / Work 设计规范对齐 + 增加留白）：
   · H1 由单词 Experiments 换成整句 Playful exploration and unexpected
     discoveries.，显式四行，字号沿用 --fs-h1、字距 -.045em、行高 .96、
     首行 var(--indent) 缩进；上留白沿用 WORK 的 22vh - 76px 公式，
     使 H1 顶与 Home / Work 的 220px 对齐。
   · 说明文字内容不变，由 24px 大段降为 14px 右列（9/13）小注，
     与 WORK 标题区说明层同构。
   · 分区 / 页脚间距回到全站节奏：原先 44 / 48 / 56px 统一放大；
     页脚去掉 56px 覆盖，回落公共 .footer 的 var(--section-gap)。
   · hover 放大由 scale(1.02) 收到 scale(1.008)（第五轮已撤销）。

   第五轮修正（用户澄清上一轮「hover 减小」是误解）：
   · hover 不是要减小而是要增大：scale(1.008) → scale(1.045)，
     比第四轮之前的 scale(1.02) 更明显。
   · 真正要减小的是视频封面尺寸：.exp-item 收窄到列区宽的 84% 并在
     列内居中，标签同宽随行；aspect-ratio 不变，正圆仍为正圆、
     16:9 仍为 16:9。上 4 下 3 规则对齐与纵向留白不动。
   · 右列中文小注改为英文（忠实翻译，不增事实）。
   ============================================================ */

.page-experiments { background: var(--c-paper); }

/* ---------- 首屏：四行大标题 + 右列小注，起始线对齐 Home / Work ---------- */
.exp-intro {
  /* nav 实测高 98px；WORK 用 22vh - 76px 把 H1 顶对齐 Home 的 221px，
     这里取同一公式，两种窗口高度下三页起始线保持一致。 */
  padding-top: clamp(40px, calc(22vh - 76px), 244px);
  padding-bottom: 0;
}
.exp-intro__title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .96;              /* 与 .hero__title / .work-hero__title 一致 */
}
.exp-intro__line { display: block; }
.exp-intro__line--indent { padding-left: var(--indent); }

.exp-intro__meta {
  margin-top: clamp(30px, 4.4vh, 56px);   /* 与 .work-hero__intro 一致 */
  align-items: start;
}
.exp-intro__note {
  grid-column: 9 / 13;
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--c-ink);
  opacity: .66;
}

/* ---------- 网格：说明层与两行之间都拉开，但保持规则对齐 ---------- */
#experimentsGrid { margin-top: clamp(48px, 5vw, 80px); }
.exp-section + .exp-section { margin-top: clamp(64px, 6vw, 100px); }

/* ---------- 规则网格：同一行内所有格子等宽、同位、同高 ----------
   封面尺寸减小：item 收窄到列区宽的 84% 并在列内居中，标签与画面同宽，
   行内仍严格等宽同位，只是相邻画面之间多出呼吸空间；纵向节奏不动。

   第六轮修正（移动端「同一行不在一条水平线」）：
   窄屏下标签会折成 1 / 2 / 3 行，按内容高度排布会把下方的视窗依次推低，
   bubbles（单行标签）的画面因此比同排其余三个高出一截。
   改为把每行拆成「标签行 + 视窗行」两条轨道，每个 item 用 subgrid 继承
   这两条轨道：标签行取整排最高的一项，所有视窗自动落在同一条起始线上。
   桌面端标签都是一行，轨道高度与原来完全一致，视觉零变化。 */
.exp-grid {
  align-items: start;
  row-gap: 0;                       /* 两条轨道之间由标签的 12px 外边距控制 */
  grid-template-rows: auto auto;
}
.exp-item {
  min-width: 0; width: 84%; justify-self: center;
  display: grid; grid-row: span 2;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;      /* 不支持时自动退化为普通 block 流，不破版 */
}
.exp-grid--loops   .exp-item { grid-column: span 3; }  /* 1440: 列区 307.8 → 画面 258.6px ×4 */
.exp-grid--studies .exp-item { grid-column: span 4; }  /* 1440: 列区 417.6 → 画面 350.8px ×3 */

/* 固定标签高度：文件名长短不一时，下方视窗上沿仍严格对齐 */
.exp-item__label {
  margin: 0 0 12px;
  min-height: 1.6em;
  line-height: 1.3;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

/* ---------- 视窗 ----------
   .frame 的 aspect-ratio / object-fit / overflow 由公共 components.css 提供，
   这里只做 button 复位、形状裁切、去掉 1px 描边与明显的 hover 放大反馈。 */
.page-experiments .exp-frame {
  padding: 0;
  border: 0;                       /* 覆盖公共 .frame 的 1px 描边 */
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-s) var(--ease);
}
.exp-frame--circle { border-radius: 50%; background: transparent; }
/* 圆形格：媒体自带同样的圆角，容器不铺底色，圆边不会透出一圈灰线 */
.exp-frame--circle .frame__poster,
.exp-frame--circle .frame__video { border-radius: inherit; }
.exp-frame--square,
.exp-frame--rect   { border-radius: 0; }
/* 放大幅度回调并加大到 1.045：比第四轮前的 1.02 更明显；
   封面收窄后列内每侧约留 25px，放大外扩约 6px，不侵占相邻格子 */
.exp-frame:hover { transform: scale(1.045); }
.exp-frame:focus-visible { outline: 2px solid var(--c-feedback); outline-offset: 4px; }
.exp-frame .frame__poster { transition: opacity var(--dur-s) var(--ease); }
.exp-frame .frame__video  { background: var(--c-placeholder); }

/* ---------- 页脚：结构与全站完全一致 ----------
   不再覆盖 margin-top，回落公共 .footer 的 var(--section-gap)（1440 下 158px）。 */
/* .page-experiments .footer 无任何页面级覆盖 */

/* 减弱动效：取消 hover 放大，静帧常显（无障碍，非移动端适配） */
@media (prefers-reduced-motion: reduce) {
  .exp-frame:hover { transform: none; }
}