.directory-update {
  max-width: 64rem;
  margin-bottom: .75rem;
  padding: .9rem 1rem;
  border-inline-start: 4px solid var(--accent);
  background: var(--tint);
}

.directory-update h2 { margin-bottom: .2rem; font: 750 1.15rem/1.2 var(--display); }
.directory-update p { font-size: .9rem; }
.directory-update a { color: var(--accent); font-weight: 700; }

.directory-filters {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  background: var(--paper);
}

.directory-filters label {
  display: block;
  margin-bottom: .35rem;
  color: var(--navy);
  font-size: .83rem;
  font-weight: 690;
}

.directory-filters input, .directory-filters select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 2.85rem;
  padding: .58rem .68rem;
  border: 1px solid #acbdd8;
  border-radius: .42rem;
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
}

.directory-filters :is(input, select, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.directory-search input { padding-left: 2.55rem; }
.directory-search { position: relative; }
.directory-search svg { position: absolute; top: 50%; left: .82rem; transform: translateY(-50%); color: var(--accent); pointer-events: none; }
.directory-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: .85rem; }
.directory-fields select { text-overflow: ellipsis; }

.directory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3.3rem;
  margin-top: .5rem;
  color: var(--muted);
  font-size: .84rem;
}

.directory-toolbar button {
  padding: .45rem .1rem;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 690;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.directory-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.directory-toolbar button:disabled { color: var(--muted); opacity: .68; text-decoration: none; cursor: default; }
.directory-empty { padding: 1.65rem 1rem; border-block: 1px solid var(--rule); color: var(--muted); }

.faculty-profile {
  display: grid;
  grid-template-columns: clamp(7rem, 11vw, 9.5rem) minmax(0, 1.8fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "photo identity teaching" "photo biography teaching";
  align-items: start;
  gap: .65rem clamp(1.2rem, 3vw, 2.5rem);
  margin-bottom: .8rem;
  padding: clamp(.8rem, 2.5vw, 1.55rem);
  border: 1px solid var(--rule);
  background: var(--paper);
}

.faculty-profile[hidden] { display: none; }
.directory-match { border-radius: .16em; background: #ffe69c; color: inherit; }
.faculty-portrait { grid-area: photo; aspect-ratio: 1; overflow: hidden; border: 1px solid #d6e1f2; background: #eaf0f9; }
.faculty-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--portrait-position, center); }
.faculty-portrait--marco img { transform: scale(1.43); transform-origin: 50% 69%; }

.faculty-identity { grid-area: identity; }
.faculty-identity h2 { color: var(--navy); font: 750 clamp(1.26rem, 2.25vw, 1.95rem)/1.08 var(--display); letter-spacing: -.02em; }
.faculty-role { margin-top: .27rem; color: var(--muted); font-size: .9rem; }
.faculty-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: .18rem .75rem; margin-top: .4rem; font-size: .8rem; }
.faculty-campus { color: var(--navy); font-weight: 690; }
.faculty-contact a { color: var(--accent); overflow-wrap: anywhere; }

.faculty-biography { grid-area: biography; color: var(--ink); font-size: .93rem; }
.faculty-keywords { display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.faculty-keywords li { padding: .18rem .48rem; border-radius: .27rem; background: #edf3ff; color: #234c9c; font-size: .76rem; }
.faculty-links { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .6rem; color: var(--accent); font-size: .81rem; font-weight: 690; }

.faculty-teaching { grid-area: teaching; padding-left: 1.05rem; border-left: 1px solid var(--rule); }
.faculty-teaching h3 { margin: 0; color: var(--navy); font-size: .82rem; font-weight: 700; }
.faculty-plan { margin-top: .4rem; border: 1px solid var(--rule); }
.faculty-plan summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .5rem;
  min-height: 2.35rem;
  padding: .35rem .6rem;
  background: #f7f9fe;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  font-size: .84rem;
  font-weight: 700;
}
.faculty-plan summary::-webkit-details-marker { display: none; }
.faculty-plan summary::after { color: var(--accent); content: "+"; }
.faculty-plan[open] summary::after { content: "\2212"; }
.faculty-plan summary small { color: var(--muted); font-size: .73rem; font-weight: 600; }
.faculty-plan summary:is(:hover, :focus-visible), .faculty-plan[data-plan="2026"] summary { background: var(--tint); color: var(--accent); }
.faculty-plan summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faculty-plan[data-plan="2026"] { border-inline-start: 3px solid var(--accent); }
.faculty-plan-content { display: grid; gap: .3rem; padding: .6rem; }
.faculty-plan-content h4 { margin: 0; color: var(--accent); font: 700 .72rem/1.3 var(--mono); text-transform: uppercase; }
.faculty-courses + h4 { margin-top: .4rem; }
.faculty-courses { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .82rem; }
.faculty-courses li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .12rem .4rem; }
.faculty-courses code { display: none; }

.research-open, .research-year, .research-close {
  border: 1px solid var(--rule);
  border-radius: .38rem;
  background: var(--paper);
  color: var(--accent);
  cursor: pointer;
  font: 700 .83rem/1.2 system-ui, sans-serif;
}

.research-open {
  margin-top: .6rem;
  min-height: 2.3rem;
  padding: .35rem .62rem;
  border-color: #aebfe6;
}
.research-open::after { margin-inline-start: .4rem; content: "↗" / ""; }
.research-open:hover, .research-year:hover, .research-close:hover { background: var(--tint); }
:is(.research-open, .research-year, .research-close):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.research-dialog {
  width: min(52rem, calc(100% - 1.5rem));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #aebfe6;
  border-top: 4px solid var(--accent);
  border-radius: .6rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1.25rem 4rem #10234732;
}
.research-dialog::backdrop { background: #121e3399; }
body:has(.research-dialog[open]) { overflow: hidden; }

.research-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(46rem, calc(100dvh - 1.5rem));
}
.research-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .75rem;
  padding: clamp(.85rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
}
.research-header h2 { margin-top: .25rem; font: 750 clamp(1.3rem, 3vw, 2.15rem)/1.12 var(--display); }
.research-close { width: 2.5rem; height: 2.5rem; font-size: 1.35rem; }

.research-body { display: flex; min-height: 0; }
.research-years {
  display: flex;
  flex: 0 0 7.4rem;
  flex-direction: column;
  gap: .35rem;
  overflow: auto;
  padding: .85rem .65rem;
  border-inline-end: 1px solid var(--rule);
  background: #f7f9fe;
}
.research-year { flex: 0 0 auto; min-height: 2.5rem; padding: .35rem .6rem; white-space: nowrap; }
.research-year[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: white; }
.research-content { flex: 1; min-width: 0; overflow: auto; padding: clamp(.85rem, 2.5vw, 1.5rem); }
.research-status { color: var(--muted); font-size: .82rem; font-weight: 650; }
.research-works { display: grid; gap: .65rem; margin-top: .6rem; }
.research-works:empty { margin-top: 0; }
.research-work { padding: clamp(.75rem, 2vw, 1rem); border: 1px solid var(--rule); border-inline-start: 3px solid #aebfe6; overflow-wrap: anywhere; }
.research-meta { color: var(--accent); font: 700 .72rem/1.4 var(--mono); }
.research-title { margin: .35rem 0 .5rem; font: 750 1.15rem/1.25 var(--display); }
.research-abstract { font-size: .88rem; }
.research-links, .research-sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; font-size: .82rem; }
.research-links { margin-top: .65rem; }
.research-link { color: var(--accent); font-weight: 690; overflow-wrap: anywhere; }
.research-link::after { margin-inline-start: .2rem; content: "↗" / ""; }
.research-sources { padding: .6rem clamp(.85rem, 2.5vw, 1.5rem); border-top: 1px solid var(--rule); color: var(--muted); }
.research-dialog [hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .research-dialog[open] { animation: research-enter .2s ease-out; }
  @keyframes research-enter {
    from { opacity: 0; transform: translateY(.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 850px) {
  .directory-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faculty-profile {
    grid-template-columns: 7rem minmax(0, 1fr);
    grid-template-areas: "photo identity" "photo biography" "photo teaching";
    grid-template-rows: auto auto 1fr;
  }
  .faculty-teaching { padding: .75rem 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}

@media (max-width: 550px) {
  .directory-fields { grid-template-columns: 1fr; }
  .faculty-profile {
    grid-template-columns: 4.9rem minmax(0, 1fr);
    grid-template-areas: "photo identity" "biography biography" "teaching teaching";
    gap: .75rem;
  }
  .faculty-role { font-size: .83rem; }
  .research-open { min-height: 2.75rem; }
  .research-body { flex-direction: column; }
  .research-years {
    flex: 0 0 auto;
    flex-direction: row;
    padding: .55rem .85rem;
    border-inline-end: 0;
    border-bottom: 1px solid var(--rule);
  }
  .research-year { min-height: 2.75rem; }
  .research-close { width: 2.75rem; height: 2.75rem; }
}