:root {
  --frame-staff: 4 / 5;
  --frame-history: 4 / 5;
  --frame-judge: 4 / 5;
  --frame-news: 16 / 9;
  --frame-department: 16 / 9;
  --frame-institution: 16 / 9;
}

.card-image {
  display:block;
  width:100%;
  max-width:760px;
  height:auto;
  aspect-ratio:var(--frame-news);
  margin-inline:auto;
  border-bottom:2px solid var(--gold);
  background:var(--surface);
  object-fit:cover;
}
.image-fit-contain { object-fit:contain !important; background:var(--page); }
.portrait-image { height:auto; aspect-ratio:var(--frame-staff); object-position:center 30%; }
.history-image { width:120px; height:auto; aspect-ratio:var(--frame-history); margin-bottom:12px; border:2px solid var(--gold); object-fit:cover; object-position:center 30%; }
.department-grid .card-image { height:auto; aspect-ratio:var(--frame-department); }
.department-grid .image-fit-contain { object-fit:contain; }
.institution-link img { width:100%; height:auto; aspect-ratio:var(--frame-institution); object-fit:cover; background:var(--surface); }
.judge-photo { width:72px; height:auto; aspect-ratio:var(--frame-judge); flex:0 0 72px; object-fit:cover; object-position:center 30%; border:1px solid var(--gold); }
.staff-card .card-image { aspect-ratio:var(--frame-staff); height:auto; object-position:center 30%; }

.image-field-preview { display:grid; grid-template-columns:minmax(120px,220px) minmax(0,1fr); align-items:start; gap:12px; margin-top:8px; }
.image-field-preview img { display:block; width:100%; height:auto; aspect-ratio:var(--frame-news); border:1px solid var(--gold); background:var(--page); object-fit:cover; }
.image-field-preview[data-frame="staff"] img, .image-field-preview[data-frame="history"] img { aspect-ratio:var(--frame-staff); }
.image-frame-hint { display:block; margin-top:4px; color:var(--muted); font-size:.9rem; }

.crop-preview-stage { display:grid; gap:12px; width:min(100%,680px); margin:0 auto; }
.crop-preview-stage[data-device="mobile"] { width:min(100%,360px); }
.crop-preview-stage > :is(.card, .timeline-item, .institution-link) { min-width:0; overflow:hidden; border:2px solid var(--gold); background:var(--card); }
.crop-preview-stage .card-body { padding:12px; }
.crop-preview-stage .card h3, .crop-preview-stage .timeline-item h3 { color:var(--gold-bright); }
.crop-preview-stage .staff-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.crop-preview-stage .history-image { display:block; }
.crop-preview-stage .institution-link { color:var(--text); }
.crop-preview-stage .institution-link span { display:block; padding:10px; color:var(--gold-bright); font-weight:700; }
.crop-preview-stage .institution-description { padding:0 10px 10px; }