/* 主题语义（2026-10-15 v1）：
   - 作品胶片随主题：底 var(--ink)、字 var(--text) / var(--muted)、强调 var(--ochre) / var(--ochre-text)，
     亮色下与原先的纸底墨字逐值相同，深色下整段变为墨底纸字（原先固定 --paper / --ink-c，深色主题里配色错位）；
   - FDE 工作方式是两种主题下都为深色的色块（var(--block-bg)），块内一律用 on-block 令牌，不再借用随主题翻转的 --muted / --ochre；
   - 四张步骤卡各有一组底 / 字 / 正文 / 小标 / 编号令牌，按主题分别定义，保证 02、03 深色可读、04 编号与箭头不再与卡底同色。 */
.fde-film {
  padding: clamp(48px, 7vw, 98px) 5vw clamp(54px, 8vw, 108px);
  color: var(--text);
  background: var(--ink);
  overflow: hidden;
}
.fde-film__heading {
  max-width: 1440px;
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, .55fr);
  align-items: end;
  gap: 7vw;
}
.fde-eyebrow { margin: 0 0 17px; color: var(--ochre-text); font-size: 11px; letter-spacing: .09em; }
.fde-film__heading h2,
.fde-process__intro h2 {
  margin: 0;
  font-size: clamp(38px, 5.3vw, 78px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.055em;
}
.fde-film__heading h2 span { color: var(--ochre); }
.fde-film__heading > p { max-width: 355px; margin: 0 0 7px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.fde-film__viewport { max-width: 1440px; margin: auto; }
.fde-film__rail {
  position: relative;
  display: flex;
  align-items: start;
  gap: clamp(14px, 2.4vw, 34px);
  overflow-x: auto;
  padding: 4px max(0px, calc((100vw - 1440px) / 2)) 22px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 5vw;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--ochre) var(--surface-raised);
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
  cursor: grab;
}
.fde-film__rail:focus-visible { outline: 2px solid var(--ochre); outline-offset: -2px; }
.fde-film__rail.is-dragging { cursor: grabbing; user-select: none; }
.fde-film__slide { flex: 0 0 min(82vw, 1080px); scroll-snap-align: center; }
.fde-film__image {
  position: relative;
  aspect-ratio: 1236 / 780;
  overflow: hidden;
  background: var(--block-bg);
  box-shadow: 0 18px 48px rgba(39, 34, 25, .13);
}
.fde-film__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fde-film__image-label {
  position: absolute;
  left: 16px;
  bottom: 15px;
  padding: 9px 12px;
  color: var(--paper);
  background: color-mix(in srgb, var(--block-bg) 82%, transparent);
  font-size: 12px;
  letter-spacing: .06em;
}
.fde-film__shutter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(90deg, var(--block-bg) 0 3px, transparent 3px 15px);
}
.fde-film__caption { display: grid; grid-template-columns: .42fr 1fr; align-items: baseline; column-gap: 18px; padding: 17px 2px 0; }
.fde-film__caption > span { grid-row: 1 / span 2; color: color-mix(in srgb, var(--ochre-text) 82%, var(--text)); font-size: 12px; letter-spacing: .04em; }
.fde-film__caption h3 { margin: 0; font-size: clamp(19px, 2vw, 27px); line-height: 1.35; font-weight: 500; letter-spacing: -.025em; }
.fde-film__caption p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.fde-film__controls {
  max-width: 1440px;
  min-height: 45px;
  margin: 5px auto 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.fde-film__controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.fde-film__controls button:is(:hover, :focus-visible) { border-color: var(--ochre); background: color-mix(in srgb, var(--ochre) 8%, transparent); }
.fde-film__controls button:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.fde-film__controls #fde-film-toggle { color: var(--on-accent); border-color: var(--ochre-text); background: var(--ochre-text); }
.fde-film__controls #fde-film-toggle:is(:hover, :focus-visible) { color: var(--on-accent); background: color-mix(in srgb, var(--ochre-text) 86%, var(--text)); }
#fde-film-status { margin-left: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.fde-process {
  /* 深色色块（两种主题都是），块内文字令牌固定为深底配色 */
  --on-block: #F2EDE4;
  --on-block-muted: #B5AC9F;
  --on-block-accent: #C4A678;
  --on-block-ochre: #B8986A;
  position: relative;
  padding: clamp(58px, 8vw, 112px) 5vw clamp(64px, 9vw, 126px);
  color: var(--on-block);
  background: var(--block-bg);
  overflow: clip;
}
.fde-process__intro { max-width: 1440px; margin: 0 auto clamp(34px, 5vw, 68px); }
.fde-process .fde-eyebrow { color: var(--on-block-accent); }
.fde-process__intro h2 { max-width: 940px; color: var(--on-block); }
.fde-process__intro h2 span { color: var(--on-block-ochre); word-break: keep-all; overflow-wrap: anywhere; }
.fde-process__intro > p:last-child { max-width: 500px; margin: 20px 0 0; color: var(--on-block-muted); font-size: 15px; line-height: 1.9; }
.fde-process__stack { max-width: 1200px; margin: 0 auto; padding-bottom: 5vh; }
.fde-step {
  position: sticky;
  top: calc(13vh + var(--step-index) * 9px);
  z-index: 1;
  min-height: clamp(300px, 43vh, 465px);
  margin-bottom: 7vh;
  padding: clamp(25px, 4vw, 58px);
  display: grid;
  grid-template-columns: minmax(80px, .24fr) minmax(0, 1fr) 40px;
  align-items: start;
  gap: clamp(18px, 4vw, 60px);
  color: var(--step-fg);
  background: var(--step-bg);
  border-top: 2px solid var(--step-rule);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .25);
}
/* 步骤卡令牌：亮色主题（默认）——纸 → 纸灰 → 中灰 → 浅赭，墨字；编号 / 小标按各自卡底取足对比 */
.fde-step { --step-bg: #F2EDE4; --step-fg: #1F1C18; --step-soft: rgba(31, 28, 24, .78); --step-kicker: #7A603D; --step-mark: #9A7B50; --step-rule: #9A7B50; }
.fde-step:nth-child(2) { --step-bg: #E9E2D6; --step-kicker: #6E5636; --step-mark: #7A603D; }
.fde-step:nth-child(3) { --step-bg: #ACA69D; --step-soft: rgba(31, 28, 24, .88); --step-kicker: #3A2D1C; --step-mark: #4A3A25; }
.fde-step:nth-child(4) { --step-bg: #B29871; --step-soft: rgba(31, 28, 24, .9); --step-kicker: #3A2D1C; --step-mark: #3A2D1C; --step-rule: #F2EDE4; }
/* 深色主题：深底纸字，逐张略亮；04 为赭色强调卡，墨字 */
html[data-theme="dark"] .fde-step { --step-bg: #3A342C; --step-fg: #F2EDE4; --step-soft: rgba(242, 237, 228, .86); --step-kicker: #D4BB92; --step-mark: #B8986A; --step-rule: #B8986A; }
html[data-theme="dark"] .fde-step:nth-child(2) { --step-bg: #433C33; }
html[data-theme="dark"] .fde-step:nth-child(3) { --step-bg: #4C443A; }
html[data-theme="dark"] .fde-step:nth-child(4) { --step-bg: #B8986A; --step-fg: #1F1C18; --step-soft: rgba(31, 28, 24, .9); --step-kicker: #3A2D1C; --step-mark: #3A2D1C; --step-rule: #F2EDE4; }
.fde-step:nth-child(2) { z-index: 2; }
.fde-step:nth-child(3) { z-index: 3; }
.fde-step:nth-child(4) { z-index: 4; }
.fde-step__index { color: var(--step-mark); font-size: clamp(32px, 4vw, 58px); line-height: 1; letter-spacing: -.06em; }
.fde-step > div > p:first-child { margin: 4px 0 16px; color: var(--step-kicker); font-size: 10px; letter-spacing: .11em; }
/* 步骤标题：宽屏按内容列宽定字号，最长一句（13 字）也一行排下；放不下时只在 index 里的 <wbr> 词组处换行，不留单字 */
.fde-step > div { min-width: 0; container-type: inline-size; }
.fde-step h3 { max-width: 820px; margin: 0; color: var(--step-fg); font-size: clamp(28px, 4.6vw, 58px); font-size: min(clamp(28px, 4.6vw, 62px), 7.8cqi); font-weight: 500; line-height: 1.12; letter-spacing: -.05em; word-break: keep-all; overflow-wrap: anywhere; }
.fde-step > div > p:last-child { max-width: 640px; margin: 19px 0 0; color: var(--step-soft); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.9; }
.fde-step__edge { align-self: end; justify-self: end; color: var(--step-mark); font-size: 28px; }
.fde-process__link { display: flex; width: fit-content; gap: 12px; align-items: center; margin: 14px auto 0; padding: 12px 0; border-bottom: 1px solid rgba(242, 238, 230, .35); color: var(--on-block); font-size: 12px; }
.fde-process__link:is(:hover, :focus-visible) { border-bottom-color: var(--on-block-accent); }
.fde-process__link span { color: var(--on-block-accent); }

body.motion-off .fde-film__controls button { transition: none !important; }
body.motion-off .fde-step { position: relative; top: auto; }
/* 与 hero-cinema.css 的章节栏让位一致：1280–1849 档内容右缘（含巡游胶片的裁切边）至少让出 82 px */
@media (min-width: 1280px) and (max-width: 1849px) {
  .fde-film, .fde-process { padding-inline: max(5vw, 82px); }
}
@media (prefers-reduced-motion: reduce) {
  .fde-film__rail { scroll-behavior: auto !important; }
  .fde-film__controls button { transition: none !important; }
  .fde-step { position: relative; top: auto; }
}
@media (max-width: 760px) {
  .fde-film { padding: 47px 0 55px; }
  .fde-film__heading { display: block; margin: 0 22px 25px; }
  .fde-film__heading h2, .fde-process__intro h2 { font-size: clamp(37px, 10vw, 54px); }
  .fde-film__heading > p { margin-top: 15px; font-size: 14px; }
  .fde-film__rail { gap: 14px; padding: 4px 22px 18px; scroll-padding-inline: 22px; }
  .fde-film__slide { flex-basis: 88vw; }
  .fde-film__caption { grid-template-columns: 1fr; gap: 7px; padding-top: 13px; }
  .fde-film__caption > span { grid-row: auto; }
  .fde-film__caption h3 { font-size: 20px; }
  .fde-film__caption p { font-size: 12px; }
  .fde-film__controls { margin: 3px 22px 0; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); gap: 6px; flex-wrap: wrap; }
  .fde-film__controls button { min-width: 44px; min-height: 44px; }
  #fde-film-status { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; }
  .fde-process { padding: 54px 22px 62px; }
  .fde-process__intro { margin-bottom: 28px; }
  .fde-process__intro > p:last-child { font-size: 14px; }
  .fde-process__stack { display: grid; gap: 12px; padding: 0; }
  .fde-step {
    position: relative;
    top: auto;
    z-index: auto;
    min-height: 0;
    margin: 0;
    padding: 24px 20px 27px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }
  .fde-step__index { font-size: 30px; }
  .fde-step > div > p:first-child { margin: 3px 0 12px; font-size: 9px; }
  .fde-step h3 { font-size: clamp(25px, 7vw, 34px); font-size: min(clamp(25px, 7vw, 34px), 12.4cqi); }
  .fde-step > div > p:last-child { margin-top: 12px; font-size: 14px; line-height: 1.8; }
  .fde-step__edge { display: none; }
}