/* Healthy City Lab people directory — extends the homepage portal system. */
.people-page main{overflow:clip}

/* Hero mirrors the homepage team slide. */
.people-hero{
  min-height:max(540px,calc(100svh - var(--header-h)));
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(360px,2fr);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.people-hero-media{
  min-width:0;
  min-height:max(540px,calc(100svh - var(--header-h)));
  margin:0;
  overflow:hidden;
  border-right:1px solid var(--line);
  background:var(--paper-2);
}
.people-hero-media picture{display:block;width:100%;height:100%}
.people-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  filter:saturate(.92) contrast(.98);
}
.people-hero-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(2.75rem,7svh,7rem) var(--pad) clamp(4.5rem,9svh,8rem) clamp(2.25rem,4.5vw,6rem);
}
.people-hero-copy .section-label{margin-bottom:clamp(1rem,2svh,1.5rem)}
.people-hero h1{
  max-width:760px;
  font-family:var(--serif);
  font-size:clamp(2.7rem,min(5.3vw,7.4svh),6.8rem);
  font-weight:680;
  line-height:1;
  letter-spacing:-.06em;
  text-wrap:balance;
}
.people-hero h1 span{color:var(--hero-green);font-weight:760}
.people-hero-lead{
  max-width:650px;
  margin-top:clamp(1rem,2.3svh,1.75rem);
  color:var(--muted);
  font-size:clamp(.92rem,min(1.25vw,2svh),1.2rem);
  line-height:1.85;
}
.people-counts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(1.5rem,3svh,2.5rem);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.people-counts div{
  min-width:0;
  min-height:92px;
  padding:.9rem 1rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.55rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.people-counts dt{font:650 clamp(1.45rem,2vw,2rem)/1 var(--display);letter-spacing:-.025em}
.people-counts dd{color:var(--muted);font-size:.82rem;line-height:1.45}

/* The single director is presented directly, without a redundant group heading. */
.director-section{padding-top:clamp(6rem,10vw,10rem);padding-bottom:clamp(5rem,8vw,8rem)}
.director-card{
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);
  min-height:clamp(520px,48vw,640px);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
}
.director-card .member-portrait{height:100%;min-height:520px;aspect-ratio:auto;border-right:1px solid var(--line)}
.director-copy{display:flex;flex-direction:column;justify-content:center;gap:1.15rem;padding:clamp(2rem,4vw,4.5rem)}
.director-copy .member-role{margin-bottom:0}
.director-copy h2{
  max-width:720px;
  font-family:var(--serif);
  font-size:clamp(2.6rem,4.5vw,5.4rem);
  font-weight:620;
  line-height:1.1;
  letter-spacing:-.05em;
  text-wrap:balance;
}
.director-summary{max-width:620px;color:var(--muted);font-size:clamp(.96rem,1.08vw,1.1rem);line-height:1.75}

/* Team sections use the homepage section rhythm and card system. */
.people-group{position:relative;isolation:isolate;padding-top:clamp(6.5rem,10vw,10rem);padding-bottom:clamp(7rem,11vw,11rem)}
.professional-section{
  background:var(--paper-2);
  box-shadow:0 0 0 100vmax var(--paper-2);
  clip-path:inset(0 -100vmax);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.students-section{background:var(--paper)}
.people-heading{margin-bottom:clamp(2.5rem,4vw,4rem)}
.member-grid{display:grid;gap:1rem}
.member-grid-professional{grid-template-columns:repeat(4,minmax(0,1fr))}
.member-grid-students{grid-template-columns:repeat(5,minmax(0,1fr))}
.member-card{min-width:0;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.member-portrait{
  position:relative;
  aspect-ratio:4/5;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
  color:var(--portrait-ink,var(--metro-ink));
}
.member-portrait::before,.member-portrait::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.member-portrait::before{
  width:72%;
  aspect-ratio:1;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.22;
  transform:translate(25%,-18%);
}
.member-portrait::after{
  left:0;
  right:0;
  bottom:0;
  height:34%;
  background:currentColor;
  opacity:.08;
  clip-path:polygon(0 100%,28% 24%,63% 58%,100% 0,100% 100%);
}
.member-portrait span{font:500 clamp(2.3rem,4.2vw,5.5rem)/1 var(--display);letter-spacing:-.08em}
.portrait-olive{--portrait-ink:var(--metro-sky);background:var(--metro-olive)}
.portrait-lime{--portrait-ink:var(--metro-ink);background:var(--metro-lime)}
.portrait-khaki{--portrait-ink:var(--metro-ink);background:var(--metro-khaki)}
.portrait-slate{--portrait-ink:var(--metro-stone);background:var(--metro-slate)}
.portrait-gray{--portrait-ink:var(--metro-ink);background:var(--metro-gray)}
.member-info{min-height:172px;padding:1.5rem;display:flex;flex-direction:column}
.member-role{
  margin-bottom:.85rem;
  color:var(--accent-label);
  font-size:clamp(.82rem,.92vw,.92rem);
  font-weight:800;
  line-height:1.45;
  letter-spacing:.025em;
}
.member-info h3{font-family:var(--serif);font-size:clamp(1.35rem,2vw,2rem);line-height:1.4;text-wrap:balance}
.member-focus{margin-top:auto;padding-top:1rem;color:var(--muted);font-size:clamp(.88rem,.92vw,.98rem);line-height:1.55}

html[lang="en"] .people-hero h1,
html[lang="en"] .director-copy h2{font-family:var(--display)}
html[lang="en"] .people-hero h1{font-size:clamp(2.55rem,min(5.1vw,7svh),6.4rem);font-weight:650;line-height:.95;letter-spacing:-.055em}

@media(max-width:1240px){
  .people-hero{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr)}
  .member-grid-students{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(max-width:1020px){
  .people-hero{grid-template-columns:1fr;min-height:auto}
  .people-hero-media{height:min(56svh,620px);min-height:430px;border-right:0;border-bottom:1px solid var(--line)}
  .people-hero-copy{min-height:440px;padding:clamp(3.5rem,8vw,6rem) var(--pad) 5rem}
  .people-hero h1{font-size:clamp(3.1rem,9.5vw,6rem)}
  html[lang="en"] .people-hero h1{font-size:clamp(2.9rem,8vw,5.5rem)}
  .member-grid-professional{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-grid-students{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:720px){
  .people-hero-media{height:clamp(250px,40svh,340px);min-height:0}
  .people-hero-copy{min-height:calc(100svh - var(--header-h) - clamp(250px,40svh,340px));padding:clamp(1.6rem,4.5svh,3rem) var(--pad) clamp(2.25rem,5svh,4.25rem)}
  .people-hero h1{font-size:clamp(2.35rem,min(12vw,6.2svh),4.35rem);line-height:1.02}
  html[lang="en"] .people-hero h1{font-size:clamp(2.15rem,min(11vw,5.8svh),4rem)}
  .people-hero-lead{font-size:.94rem;line-height:1.8}
  .people-counts div{min-height:82px;padding:.75rem}
  .people-counts dt{font-size:1.4rem}
  .people-counts dd{font-size:.72rem}
  .director-section{padding-top:5rem;padding-bottom:4rem}
  .director-card{grid-template-columns:1fr;min-height:0}
  .director-card .member-portrait{height:clamp(360px,70vw,480px);min-height:0;aspect-ratio:auto;border-right:0;border-bottom:1px solid var(--line)}
  .director-copy{min-height:260px;padding:2rem 1.4rem}
  .director-copy h2{font-size:clamp(2.3rem,11vw,3.6rem)}
  .people-group{padding-top:5rem;padding-bottom:6rem}
  .member-grid-professional{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-grid-students{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:420px){
  .people-counts{grid-template-columns:1fr}
  .people-counts div{min-height:0;display:grid;grid-template-columns:3.5rem 1fr;align-items:center}
  .member-grid-professional,.member-grid-students{grid-template-columns:1fr}
  .member-card{display:grid;grid-template-columns:minmax(128px,38%) minmax(0,1fr)}
  .member-portrait{height:100%;min-height:176px;aspect-ratio:auto;border-right:1px solid var(--line);border-bottom:0}
  .member-portrait span{font-size:2rem}
  .member-info{min-width:0;min-height:176px;padding:1rem}
  .member-info h3{font-size:1.25rem;overflow-wrap:anywhere}
  .member-focus{font-size:.84rem;line-height:1.5}
}

@media print{
  html.js .reveal{opacity:1;transform:none}
  .people-hero{display:block;min-height:0}
  .people-hero-media{display:none}
  .people-hero-copy{min-height:0;padding:3rem}
  .member-grid-professional{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-grid-students{grid-template-columns:repeat(3,minmax(0,1fr))}
  .director-card,.member-card{break-inside:avoid}
}