/* =========================================================================
   people.css — shared person pieces: portraits, cards, the bio pop-up.
   Used with people.js by the team and hierarchy pages.
   ========================================================================= */

/* portrait: grey until hovered, then colour */
.photo{ position:relative; overflow:hidden; background:#1C1917; border-radius:12px; filter:grayscale(1); transition:filter .35s ease }
.photo img, .photo .tile{ position:absolute; inset:0; width:100%; height:100%; transition:transform .35s ease, filter .35s ease }
.photo img{ object-fit:cover }
.tile{ display:grid; place-items:center; font-family:'Archivo',sans-serif; font-weight:800; color:rgba(255,255,255,.92); letter-spacing:-.02em }
/* photos stay gray until what they belong to is hovered or focused */
.card:hover .photo, .card:focus-visible .photo, .president:hover .photo, .node:hover .photo, .node:focus-visible .photo,
.dept:hover .dept-faces .photo, .dept.open .dept-faces .photo, .modal .photo, .org-pop .photo{ filter:none }
.card:hover .photo img, .card:hover .tile{ transform:scale(1.04) }

.muted-name{ color:#A89C92; font-weight:500 }

/* person card — opens the bio */
.card{ appearance:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
       background:#141211; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
       padding:14px 14px 18px; display:flex; flex-direction:column; gap:12px;
       transition:transform .25s ease, box-shadow .25s ease }
.card:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(217,164,65,.45) }
.card:focus-visible{ outline:2px solid #E03131; outline-offset:3px }
.card .photo{ aspect-ratio:1/1 }
.card .tile{ font-size:40px }
.card h3{ font-size:17px; letter-spacing:-.01em }
.card .role{ color:#D9A441; font-size:13.5px; font-weight:600; line-height:1.35 }
.card .note{ color:#A89C92; font-size:13px; line-height:1.4 }
.card .hint{ margin-top:auto; color:#A89C92; font-size:13px; font-weight:500 }
.card:hover .hint{ color:#F2EDE7 }

/* bio pop-up */
.backdrop{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.66); backdrop-filter:blur(6px) }
.backdrop[hidden]{ display:none }
.modal{ width:min(520px,100%); max-height:86vh; overflow:auto; background:#141211; border-radius:16px;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 80px -20px rgba(0,0,0,.8); padding:26px; position:relative }
.modal .close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; border-radius:8px; background:#1C1917; color:#F2EDE7; cursor:pointer; font-size:20px; line-height:1 }
.modal .close:hover{ background:#2a2522 }
.modal-head{ display:flex; gap:16px; align-items:center; margin-bottom:18px; padding-right:40px }
.modal-head .photo{ width:76px; height:76px; flex:none; border-radius:50% }
.modal-head .tile{ font-size:26px }
.modal h3{ font-size:21px }
.modal .role{ color:#D9A441; font-size:13.5px; font-weight:600; margin-top:4px }
.modal .bio{ color:#C9BEB4; margin:0 0 18px }
.link{ display:inline-flex; gap:8px; align-items:center; padding:10px 16px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); font-size:14.5px; font-weight:600 }
.link:hover{ box-shadow:inset 0 0 0 1px #D9A441; color:#D9A441 }