function Portrait({ shade, photoUrl, idx, label, hover }) {
  return (
    <div className="portrait" style={{ background: shade || 'var(--surface)', overflow:'hidden' }}>
      {photoUrl ? (
        <img src={photoUrl} alt="" style={{
          position:'absolute', inset:0, width:'100%', height:'100%',
          objectFit:'cover', objectPosition:'top center',
          transform: hover ? 'scale(1.035)' : 'none',
          transition:'transform var(--dur) var(--ease)'
        }} />
      ) : (
        <div className="ph-figure" style={{
          background: shade || 'var(--surface)',
          transform: hover ? 'scale(1.035)' : 'none'
        }}></div>
      )}
      {label && <span className="ph-tag">{label}</span>}
      {idx != null && !photoUrl && <span className="ph-idx">{String(idx).padStart(2,'0')}</span>}
    </div>
  );
}
window.Portrait = Portrait;