/* ============ 工艺标准页（craft.html）· 滚轴叙事（2026-10-13 重构）============
   深色段（hero + 三个问题）→ 浅色段（九宫格 / 八节点 / CTA）。
   深色段的配色只在本页命名空间内定义，不污染全站令牌。 */
.craft-dark {
  --ck-ink:#05090F;
  --ck-ink-2:#0A1420;
  --ck-ink-3:#0E1A2B;
  --ck-fg:#fff;
  --ck-mute:rgba(255,255,255,.63);
  --ck-accent:#5AA2FF;
  --ck-line:rgba(255,255,255,.13);
  --ck-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 页面级微值令牌（2026-10-13 落地补）----------
   下列值在 --space-* / --radius-* 阶梯里**没有对应档**
   （阶梯：4/6/8/10/12/14/16/18/20/22/24/28/32/36/40/48/64/80/96；radius 仅 sm4/md8/lg8/full），
   但它们是本页版式的既定值。按既有「令牌化不换值」原则就地命名 ⇒ 视觉零变化。
   作用域 #main：page-craft.css 只在 craft.html 加载，不污染全站令牌。 */
#main {
  --ck-sp-1: 1px;
  --ck-sp-3: 3px;
  --ck-sp-5: 5px;
  --ck-sp-7: 7px;
  --ck-sp-9: 9px;
  --ck-sp-11: 11px;
  --ck-sp-60: 3.75rem;
  --ck-sp-72: 4.5rem;
  --ck-sp-118: 7.375rem;
  --ck-rd-2: 2px;
  --ck-rd-14: 14px;
  --ck-accent-deep:#2563EB;
  --hp:0;
  /* 🔴 2026-10-21：舞台滚动预算 = 单点旋钮。
     一段舞台原来 400svh，其中 100svh 是粘住的画面、其余 300svh 全是「滑给动画看」的距离。
     收到 300svh 后净滚动距离 300→200svh，三段合计 −300svh（桌面 −3.0 屏 / 移动 −2.4 屏）。
     ⚠️ 这只是压缩滚动距离：`initCraftScroll()` 的进度是 p=(y−top)/(stage−pin) 归一化的，
        动画关键帧、镜头交叉、文字帧切换全都不变，只是「每帧分到的滚动变少」。
     觉得太快就往回调（340svh 是原移动端值），别去改 JS。 */
  --ck-stage: 300svh;
}

/* ---------- 滚动总进度条 ---------- */
.craft-prog { position:fixed; left:0; top:0; height:2px; width:100%; z-index:var(--z-header); background:rgba(11,31,58,.10); }
.craft-prog i { display:block; height:100%; background:linear-gradient(90deg,var(--ck-accent-deep),#5AA2FF); transform:scaleX(0); transform-origin:0 50%; will-change:transform; }

/* ---------- 首屏 ---------- */
.craft-hero { position:relative; height:100svh; min-height:620px; overflow:hidden; background:var(--ck-ink); }
.craft-hero-media { position:absolute; inset:0; overflow:hidden; }
.craft-hero-media img { width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.02 + var(--hp,0) * .09)); }
.craft-hero-veil { position:absolute; inset:0; pointer-events:none;
  /* 2026-10-25：整片深盖改为「上下轻压 + 底部托字」——原 .62/.90/.97 把放线照压成一片深蓝，
     最有说服力的实拍反而看不清。中文落点在底部，所以只把底部压到 .78 保证白字可读。 */
  background:
    linear-gradient(180deg, rgba(5,9,15,.42) 0%, rgba(5,9,15,.06) 26%, rgba(5,9,15,.16) 54%, rgba(5,9,15,.72) 84%, rgba(5,9,15,.82) 100%),
    radial-gradient(96% 62% at 16% 74%, rgba(5,9,15,.30) 0%, rgba(5,9,15,.06) 52%, transparent 74%); }
.craft-hero-copy { position:absolute; inset:auto 0 0 0; padding-bottom:11svh; color:var(--ck-fg);
  transform:translateY(calc(var(--hp,0) * -70px)); opacity:calc(1 - var(--hp,0) * 1.25); }
.craft-kicker { margin:0 0 var(--space-4-5); font-size:var(--fs-nano); font-weight:800; letter-spacing:.22em; color:rgba(255,255,255,.86); text-transform:uppercase; }
.craft-kicker::before { content:""; display:inline-block; width:18px; height:2px; background:var(--ck-accent); vertical-align:middle; margin-right:var(--ck-sp-11); }
.craft-hero h1 { margin:0 0 var(--space-5); font-size:var(--fs-d2); font-weight:800; line-height:1.06;
  letter-spacing:-0.025em; word-break:keep-all; text-shadow:0 2px 26px rgba(0,0,0,.45); }
.craft-hero-lead { margin:0 0 var(--space-8); max-width:34em; font-size:clamp(1rem,1.45vw,1.2rem); line-height:1.66; color:var(--ck-mute); }
.craft-ask { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--ck-sp-9); }
.craft-ask li { display:flex; gap:var(--ck-sp-9); align-items:center; padding:var(--space-2) var(--space-4); border-radius:var(--radius-full);
  border:1px solid var(--ck-line); background:rgba(255,255,255,.06); font-size:var(--fs-caption); font-weight:600; }
.craft-ask b { font-size:var(--fs-nano); font-weight:800; color:var(--ck-accent); letter-spacing:.08em; }
/* 🔴 2026-10-17 这里有过一次**改错又改回**，记下来别再犯：
   ① 体检报「Q1/Q2 12px，白底 2.61:1」⇒ 我把颜色换成 `--ck-accent-deep`(#2563EB)。
   ② 复核发现那 2.61 是**探针算错了背景**：`.craft-ask li` 有 `rgba(255,255,255,.06)`
      这层 6% 的白，旧 `effBg` 走到真正的不透明深色 `section.craft-hero`（rgb(5,9,15)）时
      因为「已有半透明累积」而不返回，一路走到 body ⇒ 把深色底当成白底。
   ③ 真实底色是**深色**，`--ck-accent`(#5AA2FF) 在深底上是 **6.83:1（AA 通过）**；
      换成 #2563EB 反而只有 **3.45:1（不通过）** —— 差点把一个好颜色改坏。
   ⇒ 结论：**颜色对的，探针是错的**。这条留在 `--ck-accent`，`--ck-accent-deep`
      只用于下面那条进度条渐变（装饰性、非文本）。 */
.craft-cue { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:var(--ck-sp-9); }
.craft-cue span { font-size:var(--fs-nano); letter-spacing:.2em; color:rgba(255,255,255,.6); }
.craft-cue i { display:block; width:2px; height:40px; border-radius:var(--ck-rd-2);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.1)); animation:craft-cue 2s ease-in-out infinite; }
@keyframes craft-cue { 0%,100%{opacity:.32;transform:translateY(-6px) scaleY(.86)} 50%{opacity:1;transform:translateY(6px) scaleY(1)} }

/* ---------- 过渡幕 ---------- */
.craft-interlude { padding:17svh 0; background:linear-gradient(180deg,var(--ck-ink) 0%,var(--ck-ink-2) 100%); color:var(--ck-fg); }
.craft-interlude p { margin:0 auto; max-width:19em; text-align:center; font-size:clamp(1.4rem,3.2vw,2.4rem);
  font-weight:700; line-height:1.46; letter-spacing:-0.015em; color:rgba(255,255,255,.9); }
.craft-interlude em { font-style:normal; color:var(--ck-accent); }

/* ---------- 问题舞台（滚动驱动）---------- */
.craft-stage { position:relative; height:var(--ck-stage, 300svh); background:var(--ck-ink-2); }
.craft-stage:nth-of-type(even) { background:linear-gradient(180deg,var(--ck-ink-2),var(--ck-ink-3)); }
.craft-pin { position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden;
  --p:0; }
.craft-shots { position:absolute; inset:0; }
.craft-shot { position:absolute; inset:0; opacity:0; will-change:opacity; }
/* 无 JS 兜底：首帧默认可见（JS 接管后以 inline opacity 覆盖） */
.craft-shot:first-child { opacity:1; }
.craft-shot img { width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.045 + var(--p) * .085)); will-change:transform; }
.craft-stage-veil { position:absolute; inset:0; pointer-events:none;
  /* 2026-10-25：`.86/.93/.97` + 42% 径向暗角 = 施工照被压成蓝黑色块；
     现在只保「顶部收边 + 底部托字」，中段几乎不压，让放线、开槽这些细节能看见。
     ⚠️ 底部仍要压到 .88：工艺正文是白字且贴底（实测 .74 压在亮地面上不足 4.5:1），
        所以从 60% 才起步加深 —— 上半幅（照片细节区）保持通透。 */
  background:
    linear-gradient(180deg,rgba(5,9,15,.30) 0%,rgba(5,9,15,.02) 24%,rgba(5,9,15,.04) 44%,rgba(5,9,15,.40) 56%,rgba(5,9,15,.68) 70%,rgba(5,9,15,.86) 84%,rgba(5,9,15,.90) 100%),
    radial-gradient(128% 108% at 50% 44%,transparent 58%,rgba(5,9,15,.18) 100%); }
.craft-chmark { position:absolute; right:max(24px,5vw); top:clamp(4.375rem,13vh,8.75rem); font-size:clamp(4.6rem,16vw,14rem);
  font-weight:800; line-height:.8; letter-spacing:-0.05em; color:rgba(255,255,255,.075);
  font-variant-numeric:tabular-nums; pointer-events:none; user-select:none;
  transform:translateY(calc(var(--p) * -34px)); }
.craft-copy { position:absolute; inset:auto 0 0 0; height:100%; pointer-events:none;
  max-width:1244px; margin:0 auto; padding:0 var(--space-8); }
.craft-blk { position:absolute; left:var(--space-8); right:var(--space-8); bottom:0;
  padding-bottom:clamp(var(--ck-sp-60),10svh,var(--ck-sp-118)); opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ck-ease),transform .5s var(--ck-ease); pointer-events:none; }
.craft-blk.on { opacity:1; transform:none; pointer-events:auto; }
.craft-blk > * { opacity:0; transform:translateY(14px); transition:opacity .6s var(--ck-ease),transform .6s var(--ck-ease); }
.craft-blk.on > * { opacity:1; transform:none; }
.craft-blk.on .craft-blk-k { transition-delay:.06s; }
.craft-blk.on h3 { transition-delay:.14s; }
.craft-blk.on p, .craft-blk.on ul, .craft-blk.on .craft-nums { transition-delay:.24s; }
.craft-blk-k { margin:0 0 var(--space-3-5); font-size:var(--fs-nano); font-weight:800; letter-spacing:.2em; color:var(--ck-accent); }
.craft-blk h3 { margin:0 0 var(--space-4); max-width:17em; font-size:clamp(1.6rem,4.1vw,3.1rem); font-weight:800;
  line-height:1.14; letter-spacing:-0.02em; color:var(--ck-fg); }
.craft-blk p { margin:0; max-width:36em; font-size:clamp(.96rem,1.3vw,1.12rem); line-height:1.68; color:var(--ck-mute); }

.craft-tags { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2); max-width:44em; }
.craft-tags li { padding:var(--ck-sp-7) var(--space-3-5); border-radius:var(--radius-full); border:1px solid var(--ck-line);
  background:rgba(255,255,255,.06); font-size:var(--fs-small); font-weight:600; color:rgba(255,255,255,.92); }
.craft-tags li b { margin-right:var(--space-1-5); font-size:var(--fs-nano); font-weight:800; color:var(--ck-accent); }

.craft-nums { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--ck-sp-1); max-width:980px;
  border:1px solid var(--ck-line); border-radius:var(--ck-rd-14); overflow:hidden; background:var(--ck-line); }
.craft-nums > div { padding:var(--space-4) var(--space-4-5); background:rgba(9,17,29,.74); }
.craft-nums .v { font-size:clamp(1.4rem,2.9vw,2.15rem); font-weight:800; line-height:1.1; letter-spacing:-0.02em;
  color:#fff; font-variant-numeric:tabular-nums; }
.craft-nums .v u { text-decoration:none; margin-left:var(--ck-sp-3); font-size:.5em; font-weight:700; color:var(--ck-accent); }
.craft-nums .t { margin-top:var(--ck-sp-5); font-size:var(--fs-nano); line-height:1.5; color:var(--ck-mute); }

.craft-dots { position:absolute; left:max(24px,5vw); bottom:clamp(var(--ck-sp-60),10svh,var(--ck-sp-118)); display:flex; gap:var(--ck-sp-7); z-index:3; }
.craft-dots i { display:block; width:22px; height:2px; border-radius:var(--ck-rd-2); background:rgba(255,255,255,.22); transition:background var(--duration-normal); }
.craft-dots i.on { background:var(--ck-accent); }

/* ---------- 九宫格（浅色段）---------- */
.craft-grid-sec { padding:var(--section-pad-block) 0 0; background:var(--white); }
.craft-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-8); }
.craft-grid figure { margin:0; }
.craft-grid .case-figure-btn { display:block; width:100%; padding:0; border:0; background:var(--gray-100);
  cursor:zoom-in; border-radius:var(--radius-lg); overflow:hidden; }
.craft-grid img { display:block; width:100%; height:auto; aspect-ratio: 4 / 3; object-fit:cover; }
.craft-grid .case-figure-btn:focus-visible { outline:2px solid var(--blue-500); outline-offset:2px; }

/* 移动端折叠按钮（2026-10-21）
   ⚠️ 只在 ≤767 出现：桌面是 4 列 × 2 行，8 个全显才排得满。 */
.cc-more { display:none; }
@media (max-width:767px) {
  .craft-chain .cc-extra { display:none; }
  .craft-chain.cc-open .cc-extra { display:flex; }
  .cc-more { display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:var(--space-1); width:100%; min-height:44px; margin-top:var(--space-3);
    padding:var(--space-3) var(--space-4); cursor:pointer; font:inherit;
    border:1px dashed var(--gray-300); border-radius:var(--radius-md);
    background:transparent; color:var(--blue-600); }
  .cc-more-t { font-size:var(--fs-small); font-weight:700; }
  .cc-more-n { font-size:var(--fs-nano); color:var(--gray-500); }
  .cc-more[aria-expanded="true"] { border-style:solid; }
}

/* ---------- 八节点链条（浅色段）---------- */
.craft-chain-sec { padding:var(--section-pad-block) 0; background:var(--white); }
/* 🔴 每卡固定 3 个指标（2×2 网格 + 第 4 格「另有 N 条」）⇒ **卡片天然等高**，
   不靠 JS 量高。这是本区块的结构约束：`m` 少于 3 条会露出空格子，
   多于 3 条会把第 4 格挤掉。 */
.craft-chain { list-style:none; margin:var(--space-8) 0 0; padding:0; display:grid; gap:var(--ck-sp-1);
  grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); overflow:hidden; background:var(--gray-200); }
.craft-chain > li { padding:var(--space-5) var(--space-5) var(--space-4); background:var(--white);
  display:flex; flex-direction:column; }
.craft-chain .no { display:block; margin-bottom:var(--space-2); font-family:var(--font-display); font-size:var(--fs-nano);
  font-weight:700; letter-spacing:.16em; color:var(--blue-600); }
.craft-chain .nm { display:block; font-size:var(--fs-body-sm); font-weight:700; color:var(--navy-900); line-height:1.42; }
/* 副标锁两行：1 行 / 2 行混排会让四张卡的指标格起点错开 8~9px（读作「没对齐」） */
.craft-chain .sb { display:block; margin-top:var(--space-1-5); font-size:var(--fs-small); line-height:1.6;
  color:var(--gray-500); min-height:2.6em; }
/* 指标格：值(display 体) + 说明。`min-height` 固定两行说明，同样是为了跨卡对齐。 */
.craft-chain .m { list-style:none; margin:var(--space-4) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
.craft-chain .m > li { min-height:4.85rem; padding:var(--space-2) var(--space-2-5) var(--space-2);
  background:var(--gray-100); border-radius:var(--radius-sm); font-size:var(--fs-nano); line-height:1.4; color:var(--gray-500); }
.craft-chain .m b { display:block; font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg);
  line-height:1.1; letter-spacing:-0.02em; color:var(--navy-900); font-variant-numeric:tabular-nums; }
.craft-chain .m b small { margin-left:var(--space-1); font-size:var(--fs-small); font-weight:600; letter-spacing:0; color:var(--gray-500); }
.craft-chain .m span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:var(--space-1); }
/* 只有 3 格（无余量）时，第 3 格横跨两列，避免右下角留空格；
   横跨后格子更宽、文字仍只占一行 ⇒ 内容垂直居中，否则底部会空一大块。 */
.craft-chain .m > li:last-child:nth-child(3) { grid-column:span 2;
  display:flex; flex-direction:row; align-items:center; gap:var(--space-2); }
.craft-chain .m > li.more { display:flex; flex-direction:column; justify-content:center;
  background:transparent; border:1px dashed var(--gray-300); }
.craft-chain .m > li.more b { font-size:var(--fs-caption); letter-spacing:0; }
.craft-chain .m > li.more span { -webkit-line-clamp:1; }
/* ⚠️ 1024 下若保持 4 列，卡片内宽只剩 ~195：指标格被压到 5~6 字/行并被 clamp 截断。
   ⇒ 1200 以下降到 2 列（8 项 = 4 行），767 以下单列。 */
@media (max-width:1200px) { .craft-chain { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) { .craft-chain { grid-template-columns:1fr; } }
.craft-chain .craft-core { display:inline-block; margin-left:var(--space-1-5); padding:var(--ck-sp-1) var(--ck-sp-7); border-radius:var(--radius-md);
  background:var(--navy-900); color:#fff; font-size:var(--fs-nano); font-weight:700; font-style:normal; letter-spacing:.05em; vertical-align:2px; }
/* ---------- 主辅材条（2026-10-19）：把「标准」接到「谁供应」 ----------
   与链条同一套容器语言（白底 + 灰缝 + 圆角），避免页面上出现第二种卡片样式。 */
.craft-brand { margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--gray-200); }
.craft-brand-hd { margin:0 0 var(--space-4); font-size:var(--fs-body-sm); font-weight:700; color:var(--navy-900); }
.craft-brand-hd span { display:block; margin-top:var(--space-1); font-weight:400;
  font-size:var(--fs-small); color:var(--gray-500); }
.craft-brand-grid { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ck-sp-1);
  border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--gray-200); }
.craft-brand-grid > li { padding:var(--space-4); background:var(--white); }
.craft-brand-grid .c { display:block; font-size:var(--fs-nano); letter-spacing:.08em;
  color:var(--blue-600); font-weight:600; }
.craft-brand-grid .n { display:block; margin-top:var(--space-1); font-size:var(--fs-body-sm);
  font-weight:700; color:var(--navy-900); line-height:1.4; }
.craft-brand-grid .w { display:block; margin-top:var(--space-1); font-size:var(--fs-nano);
  color:var(--gray-500); line-height:1.5; }
.craft-brand-foot { margin:var(--space-3) 0 0; font-size:var(--fs-nano); color:var(--gray-500); }
.craft-brand-foot a { color:var(--color-interactive); text-decoration:none; font-weight:600; }
@media (hover:hover) {
  .craft-brand-foot a:hover { color:var(--color-interactive-hover); text-decoration:underline; }
}
@media (max-width:1023px) { .craft-brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) { .craft-brand-grid { grid-template-columns:1fr; } }

.craft-note { max-width:820px; margin:var(--space-8) 0 0; padding-top:var(--space-5); border-top:1px dashed var(--gray-200);
  font-size:var(--fs-small); line-height:1.8; color:var(--gray-500); }
.craft-more { display:flex; flex-wrap:wrap; gap:var(--space-2-5) var(--space-7); margin-top:var(--space-5); }
.craft-more a { font-size:var(--fs-body-sm); font-weight:500; color:var(--color-interactive); text-decoration:none; }
@media (hover:hover) { .craft-more a:hover { color:var(--color-interactive-hover); text-decoration:underline; } }

/* ---------- CTA（浅色段）---------- */
.craft-cta { padding:0 0 var(--section-pad-block); background:var(--white); }
.craft-cta-in { display:flex; flex-wrap:wrap; gap:var(--space-6); align-items:center; justify-content:space-between;
  padding:clamp(var(--space-7),4.6vw,var(--space-12)); border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(90,162,255,.03) 58%,transparent); border:1px solid var(--gray-200); }
.craft-cta h2 { margin:0 0 var(--space-2); font-size:clamp(1.35rem,2.7vw,2rem); font-weight:800; color:var(--navy-900); letter-spacing:-0.015em; }
.craft-cta p { margin:0; font-size:var(--fs-body-sm); color:var(--gray-600); }
.craft-cta .btns { display:flex; flex-wrap:wrap; gap:var(--space-3); }

/* ---------- 响应式（断点白名单：767 / 1023）---------- */
@media (max-width:1023px) {
  /* 小屏同样的比例：400→300 是 −25%，340→255 是同一比例（这里取 260svh，凑整） */
  #main { --ck-stage: 260svh; }
  .craft-chmark { top:auto; bottom:calc(clamp(var(--ck-sp-60),10svh,var(--ck-sp-118)) + 32svh); right:20px; }
  .craft-dots { bottom:auto; top:calc(50% - 40px); left:18px; flex-direction:column; }
  .craft-dots i { width:2px; height:18px; }
  .craft-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px) {
  .craft-hero-copy { padding-bottom: max(calc(8svh + var(--space-10)), 112px); }   /* 2026-10-27 V-19：原 8svh 时 Q3 chip 底 776 / 「向下浏览」顶 751 ⇒ 叠 25px。svh 方案在 375×667 只做到「刚好贴住」(gap 0)，故与固定 112px 取大 */
  .craft-blk { padding-bottom:clamp(var(--space-12),7svh,var(--ck-sp-72)); }
  .craft-blk h3 { font-size:clamp(1.42rem,6.6vw,1.95rem); }
  .craft-blk { left:var(--space-5); right:var(--space-5); }
  .craft-copy { padding:0 var(--space-5); }
  .craft-nums { grid-template-columns:1fr 1fr; }
  .craft-nums > div:last-child:nth-child(odd) { grid-column:span 2; }
  .craft-cue span { font-size:var(--fs-nano); }
}

/* ---------- 降级：减少动效 / 横屏矮视口 ----------
   两个条件共用同一套摊平规则，理由不同但结论一样：
   · prefers-reduced-motion：不播滚动叙事
   · 横屏矮视口（高度 < 600 且宽度 > 高度）：舞台钉住是 100svh，但 `min-height:600px`
     会把它撑到 600 —— 844×390 下溢出 210px，正文块 bottom 到 622，
     `overflow:hidden` 把它们整段裁掉（实测 3 个块全部在视口外，永远看不到）。
     高度差没法靠 padding 消化，只能摊平成常规流。
   ⚠️ 阈值 600 与上面 `.craft-pin{min-height:600px}` 是同一个数，改一处必须改另一处。 */
@media (prefers-reduced-motion: reduce), (max-height: 600px) and (orientation: landscape) {
  .craft-stage { height:auto; }
  /* 开屏同理：`min-height:620px` 在 390 高的横屏里会把 hero 撑到 620，
     H1 底 430、lead 底 503 —— 两者都被 `overflow:hidden` 切掉。
     放开 min-height 后 hero 回到 100svh（390），copy 是 bottom 对齐 ⇒ 内容自然落在视口内。 */
  .craft-hero { min-height: 0; }
  .craft-pin { position:static; height:auto; min-height:0; padding:var(--space-10) 0; }
  .craft-shots { position:relative; inset:auto; height:auto; }
  .craft-shot { position:relative; inset:auto; opacity:1 !important; }
  .craft-shot + .craft-shot { margin-top:var(--space-3); }
  .craft-shot img { transform:none !important; aspect-ratio: 4 / 3; object-fit:cover; }
  .craft-copy { position:static; height:auto; max-width:none; }
  .craft-blk { position:static; opacity:1 !important; transform:none !important; left:auto; right:auto; padding-bottom:var(--space-8); }
  .craft-blk > * { opacity:1 !important; transform:none !important; }
  .craft-dots, .craft-chmark, .craft-stage-veil, .craft-cue, .craft-prog { display:none; }
  .craft-hero-copy { transform:none; opacity:1; }
  .craft-hero-media img { transform:none; }
}