/* hero zone */
.hero-zone{position:relative;background-color:var(--paper-2);padding-bottom:40px;
background-image:radial-gradient(circle, rgba(0,38,77,0.09) 1.6px, transparent 1.6px);
background-size:24px 24px;overflow:hidden;isolation:isolate;}
.hero-zone::before,.hero-zone::after{content:"";position:absolute;border-radius:50%;filter:blur(6px);pointer-events:none;z-index:0;}
.hero-zone::before{top:-140px;right:-120px;width:420px;height:420px;background:radial-gradient(circle,rgba(239,126,26,0.16),transparent 70%);}
.hero-zone::after{bottom:-160px;left:-110px;width:400px;height:400px;background:radial-gradient(circle,rgba(0,64,128,0.14),transparent 70%);}
.hero-zone > *{position:relative;z-index:1;}
.crumb{padding-top:106px;font-size:12.5px;color:var(--muted);}
.crumb a:hover{color:var(--orange);}
.crumb span{margin:0 6px;color:var(--line-strong);}

.hero-title{padding-top:22px;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:9px;}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;}
.hero-title h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.6vw,48px);color:var(--heading);margin-top:10px;}
.hero-title p{font-size:15.5px;color:var(--muted);margin-top:10px;max-width:56ch;}
.hero-stat{display:inline-flex;align-items:baseline;gap:10px;margin-top:20px;}
.hero-stat .n{font-family:var(--display);font-weight:700;font-size:34px;color:var(--orange);}
.hero-stat .l{font-size:12.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);}

.hero-filter-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:24px;}
.hero-filter-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;}
@media (max-width:640px){.hero-filter-row{flex-direction:column;align-items:stretch;}.hero-filter-right{margin-left:0;}.dept-form{flex:1;}.dept-form select{max-width:none;width:100%;}}

/* alpha bar + search — its own distinct floating card, not the hero pattern */
.filter-bar{position:sticky;top:66px;z-index:60;padding:18px 0;margin-top:34px;}
.filter-inner{display:flex;align-items:center;gap:18px;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:14px 24px;}
.alpha-row{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.alpha-row::-webkit-scrollbar{display:none;}
.alpha-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:8px;border:1px solid transparent;background:none;font-size:12.5px;font-weight:700;color:var(--heading);cursor:pointer;text-decoration:none;transition:all .15s ease;}
.alpha-btn:hover{background:var(--navy-pale);}
.alpha-btn.is-active{background:var(--orange);color:#fff;}
.alpha-btn.is-disabled{color:var(--line-strong);cursor:default;}
.alpha-btn.is-disabled:hover{background:none;}
.showing{font-size:12.5px;color:var(--muted);margin-top:10px;}
.showing b{color:var(--heading);}

/* campus chips + department dropdown row */
.chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.chip-btn{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;color:var(--heading);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;text-decoration:none;transition:all .15s ease;}
.chip-btn:hover{background:var(--navy-pale);}
.chip-btn.is-active{background:var(--navy);border-color:var(--navy);color:#fff;}
.chip-btn.icon-btn{width:38px;height:38px;padding:0;justify-content:center;flex-shrink:0;}
.chip-btn.icon-btn svg{width:15px;height:15px;stroke:var(--muted);}
.chip-btn.icon-btn:hover svg{stroke:var(--heading);}
.dept-form{display:flex;align-items:center;}
.dept-form select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  font-size:12.5px;font-weight:700;font-family:var(--body);color:var(--heading);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  background-size:13px;
  border:1px solid var(--line);border-radius:999px;
  padding:9px 34px 9px 16px;cursor:pointer;max-width:220px;height:38px;
  box-shadow:var(--shadow-sm);transition:border-color .15s ease,background-color .15s ease;
}
.dept-form select:hover{border-color:var(--line-strong);}
.dept-form select:focus{outline:none;border-color:var(--navy);}
html[data-theme="dark"] .dept-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a2ba' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* staff grid */
main{max-width:1280px;margin:0 auto;padding:30px 24px 70px;}
@media (max-width:640px){main{padding:24px 24px 60px;}}
.s-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;}
.s-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;}
.s-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--line-strong);}
.s-photo{position:relative;width:100%;aspect-ratio:1/1;background:var(--navy-pale);overflow:hidden;}
.s-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.s-photo-initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:38px;color:var(--navy);}
.s-dept{position:absolute;left:8px;bottom:8px;font-size:8.5px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:#fff;background:rgba(0,38,77,0.72);backdrop-filter:blur(3px);border-radius:999px;padding:3px 8px;max-width:calc(100% - 16px);}
.s-body{padding:14px 15px 16px;}
.s-body h3{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--heading);line-height:1.35;}
.s-desig{font-size:12.5px;color:var(--ink);margin-top:4px;}

/* pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:40px;flex-wrap:wrap;}
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--heading);font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:none;transition:all .15s ease;}
.page-btn:hover:not([aria-disabled="true"]):not(.is-active){background:var(--navy-pale);}
.page-btn.is-active{background:var(--navy);border-color:var(--navy);color:#fff;}
.page-btn[aria-disabled="true"]{opacity:0.4;cursor:default;}
.page-ellipsis{padding:0 6px;color:var(--muted);font-size:13px;}

/* empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;color:var(--muted);}
.empty-state svg{width:48px;height:48px;margin-bottom:16px;opacity:.5;}
.empty-state h3{font-family:var(--display);font-weight:700;font-size:19px;color:var(--heading);margin-bottom:6px;}
.empty-state p{font-size:13.5px;margin-bottom:20px;}