.motion { padding-block:80px 100px; color:#000000; background:#F8DFC6; scroll-margin-top:80px; }
.motion-head { max-width:820px; margin-bottom:40px; }
.motion-head h2 { margin:16px 0 24px; font:400 clamp(36px,4vw,60px)/1.08 'Anton',Impact,sans-serif; text-transform:uppercase; }
.motion-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 24px; align-items:start; }
.motion-card { display:block; min-width:0; width:100%; padding:0 0 24px; border:0; border-bottom:1px solid #000000; color:#000000; background:transparent; text-align:left; cursor:pointer; }
.motion-card img { display:block; width:auto; height:auto; max-width:100%; max-height:400px; object-fit:contain; margin:0 auto 24px; }
.motion-title { display:block; margin:0 0 12px; font:400 clamp(24px,2.5vw,34px)/1.15 'Anton',Impact,sans-serif; text-transform:uppercase; }
.motion-description,.motion-meta { display:block; font:11px/1.8 'Space Mono',monospace; }
.motion-meta { margin-top:16px; font-weight:700; }
.motion-card:hover .motion-title { text-decoration:underline; text-underline-offset:5px; }
.motion-card:focus-visible,.motion-close:focus-visible { outline:3px solid #000000; outline-offset:5px; }
.motion-player { width:min(1000px,calc(100vw - 32px)); max-width:none; max-height:92svh; margin:auto; padding:56px 0 0; border:1px solid #000000; color:#000000; background:#F8DFC6; }
.motion-player::backdrop { background:rgba(0,0,0,.8); }
.motion-player video { display:block; width:100%; max-height:calc(92svh - 150px); object-fit:contain; background:#000000; }
.motion-close { position:absolute; top:0; right:0; width:56px; height:48px; border:0; border-left:1px solid #000000; border-bottom:1px solid #000000; color:#000000; background:#FE8501; font:32px/1 sans-serif; cursor:pointer; }
.motion-close:focus-visible { outline-offset:-5px; }
.motion-caption,.motion-error { margin:0; padding:16px 24px; color:#000000; background:#F8DFC6; font:12px/1.7 'Space Mono',monospace; }
.section-hero.motion-hero { grid-template-columns:1fr; }
.motion-link { display:inline-flex; align-items:center; min-height:48px; margin-top:32px; padding:12px 20px; border:1px solid #000000; color:#000000; background:#FE8501; font:12px/1.5 'Space Mono',monospace; text-decoration:none; }
.motion-link:hover { text-decoration:underline; }
@media (max-width:900px) { .motion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .motion { padding-block:64px 72px; }.motion-grid { grid-template-columns:1fr; }.motion-head { margin-bottom:32px; } }