.motion-main { width: min(92.5rem, calc(100% - clamp(3rem, 5vw, 6rem))); padding-bottom: 5rem; }
.motion-hero { min-height: 10.15rem; display: flex; align-items: flex-start; }
.motion-hero h1 { margin: -0.12em 0 0; font-size: clamp(3.5rem, 6.667vw, 6rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; }
.motion-rule { height: 1px; background: rgba(255,255,255,.5); }
.motion-layout { display: grid; grid-template-columns: minmax(12rem, .48fr) minmax(0, 2.25fr); gap: clamp(2.75rem, 5.5vw, 5.75rem); padding-top: 2.5rem; }
.motion-sidebar { align-self: start; position: sticky; top: 7.5rem; }
.motion-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.motion-filter { appearance: none; border: 0; padding: 0 0 .28rem; background: none; color: rgba(255,255,255,.3); font: 700 1rem/1.1 "Vinila", Arial, sans-serif; cursor: pointer; transition: color 220ms ease; }
.motion-filter:hover, .motion-filter:focus-visible { color: rgba(255,255,255,.62); }
.motion-filter.is-active { position: relative; color: #fff; }
.motion-filter.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; content: ""; }
.all-works { display: inline-block; margin-top: 3rem; font-size: 1rem; font-weight: 700; line-height: 1.2; transition: opacity 220ms ease; }
.all-works:hover, .all-works:focus-visible { opacity: .62; text-decoration: underline; text-underline-offset: .28em; }
.motion-content { min-width: 0; opacity: 1; transition: opacity 170ms ease; }
.motion-content.is-switching { opacity: 0; }
.motion-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3rem clamp(1.5rem,3.2vw,3rem); }
.motion-grid--reel { grid-template-columns: 1fr; }
.motion-card { min-width: 0; }
.motion-card--reel { width: 100%; }
.motion-grid:not(.motion-grid--reel) > .motion-card--reel { grid-column: 1/-1; }
.motion-media { position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: .65rem; background: #d4d4d2; transition: filter 260ms ease, transform 420ms var(--ease-out-expo); }
.motion-card:not(.motion-card--placeholder) .motion-media:hover { filter: brightness(.88); transform: scale(.995); }
.motion-media img, .motion-hover-video, .motion-media iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.motion-media iframe { border: 0; }
.motion-card:not(.motion-card--placeholder) .motion-media.is-playing:hover { filter: none; transform: none; }
.motion-media img { opacity: 1; transition: opacity 200ms ease; }
.motion-hover-video { pointer-events: none; opacity: 0; transition: opacity 200ms ease; }
.motion-media.is-previewing img { opacity: 0; }
.motion-media.is-previewing .motion-hover-video { opacity: 1; }
.motion-card__meta { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: .75rem; row-gap: .3rem; padding-top: .65rem; }
.motion-card h2 { align-self: end; margin: 0; font-size: clamp(1.2rem,1.75vw,1.55rem); font-weight: 700; line-height: 1.08; }
.motion-card__year { align-self: end; font-size: .9rem; font-weight: 700; line-height: 1.2; }
.motion-card__descriptor { grid-column: 1/-1; margin: 0; color: rgba(255,255,255,.34); font-size: .86rem; line-height: 1.25; pointer-events: none; opacity: 1; transition: opacity 180ms ease; }
@media (hover:hover) and (pointer:fine) {
  .motion-card__descriptor { opacity: 0; }
  .motion-card:hover .motion-card__descriptor,
  .motion-card:focus-within .motion-card__descriptor { opacity: 1; }
}
.motion-card--reel h2 { font-size: clamp(1.45rem,2vw,1.85rem); }
@media (max-width: 920px) {
  .motion-layout { grid-template-columns: 10rem minmax(0,1fr); gap: 2rem; }
  .motion-grid { gap: 2.5rem 1.25rem; }
}
@media (max-width: 720px) {
  .motion-main { width: calc(100% - 3rem); padding-bottom: 3.5rem; }
  .motion-hero { min-height: 7.5rem; }
  .motion-layout { grid-template-columns: 1fr; gap: 2.75rem; padding-top: 2rem; }
  .motion-sidebar { position: static; }
  .motion-filters { flex-flow: row wrap; gap: 1rem 1.35rem; }
  .motion-filter { font-size: .9rem; }
  .all-works { margin-top: 1.75rem; font-size: .9rem; }
  .motion-grid { grid-template-columns: 1fr; gap: 2.75rem; }
}
@media (prefers-reduced-motion:reduce) { .motion-content, .motion-media, .motion-media img, .motion-hover-video, .motion-card__descriptor { transition: none; } }