/* artist.partners — breakpoints. Components re-proportion, they do not redesign
   Load order is tokens -> base -> layout -> components -> responsive;
   the media queries come last so they can override component rules.
   See README.md for the rules this system holds to. */

/* ========================= RESPONSIVE ========================= */
@media (max-width: 1100px) {
  :root { --margin: calc(var(--atom) * 2); --t-96: 64px; --t-56: 40px; --t-34: 26px; --s-3: 96px; --s-2: 48px; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .logos .logo-cell:nth-child(5n) { border-right: 1px solid var(--rule); }
  .logos .logo-cell:nth-child(3n) { border-right: 0; }
  .cap-n, .cap-film, .cap-txt, .claim-h, .claim-b { grid-column: 1 / -1; }
  .cap, .claim { gap: var(--s-1); }
  /* stacked: release the explicit row or the two would overlap */
  .work-fig, .work-txt,
  .work:nth-of-type(even) .work-fig, .work:nth-of-type(even) .work-txt { grid-column: 1 / -1; grid-row: auto; }
  .work { gap: var(--s-1); }
  .flow { grid-template-columns: 1fr 1fr; }
  .c-1-6, .c-1-7, .c-1-8 { grid-column: 1 / -1; }
  .c-9-12 { grid-column: 7 / -1; }
  .ack-block { grid-column: 2 / 12; }
  .band { height: 160px; }
}

@media (max-width: 640px) {
  :root { --margin: var(--atom); --t-96: 44px; --t-56: 30px; --t-34: 22px; --t-22: 18px; }
  .logos, .partners { grid-template-columns: 1fr 1fr; }
  .logos .logo-cell, .partners .logo-cell { border-right: 1px solid var(--rule) !important; min-height: 96px; }
  .logos .logo-cell:nth-child(2n), .partners .logo-cell:nth-child(2n) { border-right: 0 !important; }
  .stats, .flow, .offices { grid-template-columns: 1fr; }
  .step, .office { border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: var(--s-1); }
  .step:last-child, .office:last-child { border-bottom: 0; }
  .c-1-6, .c-1-7, .c-1-8,
  .c-7-12, .c-9-12, .ack-block { grid-column: 1 / -1; }
  .grid { row-gap: var(--s-2); column-gap: var(--atom); }
  .band { height: 120px; }
  /* the six links cannot share a line at this width, so let the bar
     wrap to two rows rather than clip them. A real menu toggle is
     still to build. */
  :root { --nav-h: 96px; }
  .nav { flex-wrap: wrap; row-gap: 10px; min-height: 0; }
  .nav-links { gap: 10px 14px; margin-left: 0; width: 100%; }
  .nav-mark { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .nav { transition: none; }
}