/* ---------- Creative Archives (Figma 251:1009) ----------
   Tiled artwork grouped by department. Same rhythm as the case studies: the
   first group sits 48px under the intro, departments are 96px apart, and
   tiles inside a department flow as one grid (30px gutters, 24px rows).
   Each department opens with an eyebrow-style label instead of captions. */

.cs-intro + .cs-section.ar-group { margin-top: 48px; }

.ar-label {
  margin: 0 0 var(--space-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--neutral-hairline);
}

/* Blocks inside one department continue the grid's 24px row rhythm */
.ar-group > .ar-block + .ar-block { margin-top: var(--space-md); }

.ar-tile { aspect-ratio: 4 / 5; object-fit: cover; }
.ar-tile--contain { object-fit: contain; background: var(--neutral-bg); }
.cs-motion.ar-tile { aspect-ratio: 4 / 5; }
.cs-motion.ar-tile--contain > img,
.cs-motion.ar-tile--contain > video { object-fit: contain; } /* square loops sit centred in the 4:5 tile */

.ar-mailer { aspect-ratio: 383.28 / 296.2; object-fit: cover; }
.ar-wide { aspect-ratio: 16 / 9; object-fit: cover; }
.ar-54 { aspect-ratio: 5 / 4; object-fit: cover; }

@media (max-width: 640px) {
  .cs-intro + .cs-section.ar-group { margin-top: var(--space-lg); }
  /* Archives tiles stay two-up on phones so the page doesn't run forever */
  .ar-group .cs-trio { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .ar-group .cs-pair { grid-template-columns: 1fr; gap: var(--space-sm); }
  .ar-group > .ar-block + .ar-block { margin-top: var(--space-sm); }
}