.motion-intro { padding-bottom: clamp(32px,5vw,64px); }
.motion-intro h1 { max-width: none; }
.motion-intro > p:last-child { max-width: 34ch; }
.motion-series, .motion-process { width: min(100%,var(--content-width)); margin-inline:auto; padding-inline:var(--gutter); }
.motion-series-intro { max-width: 760px; margin-bottom: 44px; }
.motion-series-intro h2 { font-size:clamp(30px,3.2vw,48px); line-height:1.15; letter-spacing:-.035em; }
.motion-series-intro p, .motion-process > p { color:var(--text-secondary); font-size:clamp(18px,1.35vw,21px); line-height:1.65; margin-top:20px; max-width:62ch; }
.motion-film-list-title { font-size:18px; font-weight:500; margin:0 0 24px; }
.motion-film-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px clamp(22px,3vw,44px); align-items:start; }
.motion-film { min-width:0; scroll-margin-top:110px; }
.motion-film-player { position:relative; aspect-ratio:9/16; background:var(--surface-secondary); overflow:hidden; }
.motion-film-player video, .motion-film-start, .motion-film-start img { width:100%; height:100%; display:block; object-fit:contain; }
.motion-film-start { position:relative; border:0; padding:0; background:transparent; cursor:pointer; color:var(--text-on-action); }
.motion-play-label { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:grid; place-items:center; width:52px; height:52px; border-radius:50%; border:1px solid #fff8; background:#f4f6ffcf; color:#18243a; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 #fff9; }
.motion-film-start:focus-visible { outline:3px solid var(--focus); outline-offset:-4px; }
.motion-film-start:hover .motion-play-label { background:#f4f6ffed; }
.motion-film-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:20px; }
.motion-film-heading h4 { font-size:clamp(21px,1.75vw,27px); line-height:1.25; letter-spacing:-.025em; }
.motion-film-heading span { color:var(--text-secondary); font-variant-numeric:tabular-nums; font-size:15px; flex-shrink:0; }
.motion-film-description { margin:10px 0 16px; font-size:16px; line-height:1.5; color:var(--text-secondary); }
.motion-transcript { font-size:15px; line-height:1.7; }
.motion-transcript summary { cursor:pointer; min-height:44px; display:list-item; padding-block:10px; }
.motion-transcript p { margin:12px 0; max-height:22rem; overflow:auto; padding-right:12px; color:var(--text-secondary); }
.motion-download { display:inline-block; font-size:15px; min-height:44px; padding-block:10px; text-decoration:underline; text-underline-offset:4px; }
.motion-film-status { position:absolute; inset:16px 16px auto; padding:10px 14px; border-radius:8px; background:var(--surface-primary); color:var(--text-primary); font-size:16px; pointer-events:none; }
.motion-film-error { position:absolute; inset:0; background:var(--surface-primary); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; gap:20px; text-align:center; }
.motion-series-note { max-width:70ch; margin-top:48px; font-size:16px; line-height:1.7; color:var(--text-secondary); }
.motion-process { padding-block:clamp(72px,9vw,128px); }
.motion-process h2 { max-width:24ch; font-size:clamp(30px,3.4vw,48px); line-height:1.15; letter-spacing:-.03em; }
.motion-process .motion-credit { font-size:16px; margin-top:28px; }
@media(prefers-reduced-motion:no-preference) and (hover:hover) {
  .motion-play-label { transition:transform 180ms ease; }
  .motion-film-start:is(:hover,:focus-visible) .motion-play-label { transform:translateX(-50%) translateY(-3px); }
}
@media(min-width:1500px) { .motion-film-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:900px) { .motion-film-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
  .motion-film-grid { grid-template-columns:minmax(0,1fr); gap:44px; }
  .motion-film-player { max-width:440px; margin-inline:auto; }
  .motion-series-intro { margin-bottom:32px; }
  .motion-intro { padding-bottom:36px; }
}