/* Department page headers: a large image beside the title (added by add_department_images.py) */
.dept-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.dept-hero-copy { min-width: 0; }
.dept-visual { margin: 0; position: relative; }
.dept-visual img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); background: #0F1238; }
.dept-visual .dept-chip { position: absolute; left: -18px; bottom: 26px; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px;
  border-radius: 18px; background: rgba(255, 255, 255, .96); color: #0F1238; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .55); max-width: calc(100% - 24px); }
.dept-visual .dept-chip b { display: block; font: 600 1rem/1.25 var(--head); color: #0F1238; }
.dept-visual .dept-chip small { display: block; font: 500 .82rem/1.3 var(--body); color: #3D4166; }
@media (max-width: 900px) {
  .dept-hero { grid-template-columns: 1fr; }
  .dept-visual { max-width: 560px; }
  .dept-visual .dept-chip { left: 12px; bottom: 12px; }
}