/* Compact academic directory layout for the team page. */
.people-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 42px;padding-bottom:54px}
.person{display:grid;grid-template-columns:108px minmax(0,1fr);column-gap:18px;align-items:center;min-height:142px;padding:15px 0}
.portrait{grid-row:span 2;width:108px;height:108px;aspect-ratio:auto;margin:0}
.portrait,.portrait-2,.portrait-3,.portrait-4,.portrait-5,.portrait-6{background:#e8efec}
.portrait:before,.portrait:after{display:none}
.portrait span{display:grid;place-items:center;width:100%;height:100%;color:#285658;font-size:26px;font-weight:500;letter-spacing:-.08em}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:none}
.mobile-nav{display:none}
.person h2{align-self:end;margin:0 0 5px;font-size:18px}
.person p{align-self:start;font-size:13px;line-height:1.35}
/* User-supplied lattice motif. Decorative CSS only; page content stays intact. */
.hero-field {
  background: linear-gradient(110deg, var(--paper) 26%, #edf1eb 66%, #e1ebe6);
}
.hero-field::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: url("lattice-pattern.jpg") right -80px top -110px / 980px auto no-repeat;
  filter: invert(1);
  mix-blend-mode: multiply;
  opacity: .24;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 88%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 88%);
  pointer-events: none;
}
.hero-field::after {
  width: 580px;
  height: 580px;
  right: 5%;
  bottom: -390px;
  background: radial-gradient(circle, #d9654314, transparent 68%);
}
.hero-field span { display: none; }
.hero-field.short { opacity: 1; transform: none; }

/* Publication and team introductions share the motif, fading before the lists. */
main { position: relative; isolation: isolate; }
main:has(> .title-only)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 460px;
  background: url("lattice-pattern.jpg") right -80px top -150px / 980px auto no-repeat;
  filter: invert(1);
  mix-blend-mode: multiply;
  opacity: .2;
  -webkit-mask-image: radial-gradient(ellipse 75% 100% at 100% 0%, #000, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 100% at 100% 0%, #000, transparent 85%);
  pointer-events: none;
}

/* A restrained light-on-teal echo in the existing project banner. */
.rsf-banner { position: relative; isolation: isolate; overflow: hidden; }
.rsf-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("lattice-pattern.jpg") right -60px center / 740px auto no-repeat;
  mix-blend-mode: screen;
  opacity: .22;
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000);
  mask-image: linear-gradient(90deg, transparent 15%, #000);
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero-field::before {
    background-position: right -180px top -40px;
    background-size: 760px auto;
    opacity: .13;
    -webkit-mask-image: linear-gradient(100deg, transparent 5%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 5%, #000 100%);
  }
  main:has(> .title-only)::before {
    height: 380px;
    background-size: 760px auto;
    background-position: right -200px top -100px;
    opacity: .12;
  }
  .rsf-banner::before { opacity: .14; }
}
@media print {
  .hero-field::before,
  main:has(> .title-only)::before,
  .rsf-banner::before { display: none; }
}
@media(max-width:900px){.site-header{position:relative;grid-template-columns:minmax(0,1fr) auto auto;gap:12px}.brand{min-width:0}.brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-nav{display:block}.mobile-nav summary{display:flex;align-items:center;gap:8px;min-height:42px;color:var(--teal);font-size:12px;font-weight:700;cursor:pointer;list-style:none}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav summary i,.mobile-nav summary i:before,.mobile-nav summary i:after{display:block;width:16px;height:1px;background:currentColor;content:""}.mobile-nav summary i{position:relative}.mobile-nav summary i:before{position:absolute;top:-5px}.mobile-nav summary i:after{position:absolute;top:5px}.mobile-nav[open] summary i{background:transparent}.mobile-nav[open] summary i:before{top:0;transform:rotate(45deg)}.mobile-nav[open] summary i:after{top:0;transform:rotate(-45deg)}.mobile-nav nav{position:absolute;z-index:10;top:58px;right:0;display:grid;min-width:230px;padding:9px 16px 14px;border:1px solid var(--line);background:var(--paper);box-shadow:0 12px 28px #1633341a}.mobile-nav nav a{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:14px;text-decoration:none}.mobile-nav nav a:last-child{border-bottom:0}.people-grid{grid-template-columns:1fr;gap:0}.person{grid-template-columns:92px minmax(0,1fr);min-height:122px}.portrait{width:92px;height:92px}.person h2{font-size:17px}}