:root{--cream:#f6f1e7;--cream2:#eee7da;--forest:#29443a;--sage:#83958a;--line:#d2c9bb;--paper:#fbf8f1;--pku-paper:#f0eee7}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--forest);font-family:"Noto Serif TC","Noto Serif CJK TC",serif}nav{height:62px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(41,68,58,.15);font-size:11px;position:sticky;top:0;background:rgba(246,241,231,.94);backdrop-filter:blur(10px);z-index:10}nav b{letter-spacing:.08em}header{width:min(1120px,88vw);margin:80px auto 70px}header span,.section-title span,.group-head span{font:700 9px Arial,sans-serif;letter-spacing:.22em;color:#668073}header h1{font-size:48px;font-weight:500;margin:12px 0 10px}header p{font-size:13px;color:#5f6c65}.faculty,.group{width:min(1120px,88vw);margin:0 auto;padding:58px 0 68px;border-top:1px solid var(--line)}.section-title,.group-head{margin-bottom:38px}.section-title h2,.group-head h2{font-size:30px;font-weight:500;margin:8px 0}.faculty-stacked{display:grid;gap:58px}.faculty-school-title,.school-label{margin-bottom:18px}.faculty-school-title span,.school-label span{font-size:15px}.faculty-school-title small,.school-label small{display:block;font:7px Arial,sans-serif;letter-spacing:.14em;margin-top:4px;color:#829087}
/* Faculty: one full-width row per university. Formal and calm. */
.faculty-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:15px;align-items:start}.faculty .portrait{aspect-ratio:4/5;padding:6px}.faculty .person h3{font-size:12px}.faculty .person p{font-size:9px}.faculty-pku{padding-top:4px}
/* Students: label + five people. */
.school-row{display:grid;grid-template-columns:150px 1fr;gap:34px;align-items:start;margin:30px 0 46px}.people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.person{text-align:left;transition:transform .28s ease;transform-origin:center bottom}.portrait{aspect-ratio:4/5;background:var(--paper);padding:7px;box-shadow:0 8px 18px rgba(48,55,48,.08);transition:transform .28s ease,box-shadow .28s ease}.portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.person h3{font-size:13px;font-weight:500;margin:11px 4px 0}.person p{font-size:9px;line-height:1.5;color:#7b877f;margin:4px}.person:hover{transform:translateY(-6px)}.person:hover .portrait{transform:rotate(-.65deg);box-shadow:0 14px 26px rgba(48,55,48,.14)}
/* PKU formal portrait treatment: same card rhythm, but don't pretend ID photos are lifestyle shots. */
.pku-row{margin-top:50px}.pku-row .portrait{background:var(--pku-paper);padding:13px 15px;box-shadow:none;border:1px solid rgba(41,68,58,.08)}.pku-row .portrait img{object-fit:contain;object-position:center bottom;background:#f8f7f3}.pku-row .person:hover .portrait{transform:none;box-shadow:0 10px 20px rgba(48,55,48,.08);border-color:rgba(41,68,58,.2)}.pku-row .person:hover{transform:translateY(-4px)}
/* Faculty photos need consistent visual occupation. Cover is deliberate; per-photo focal tuning comes in final QA. */
.faculty .portrait img{object-fit:cover;object-position:center 28%}.faculty-pku .portrait{background:#f3f1eb;padding:8px}.faculty-pku .portrait img{object-position:center 22%}
footer{margin-top:60px;padding:45px 7vw;background:var(--cream2);display:flex;justify-content:space-between;font-size:10px}@media(max-width:1050px){.faculty-grid{grid-template-columns:repeat(7,130px);overflow-x:auto;padding-bottom:12px}.school-row{grid-template-columns:130px 1fr}.people{grid-template-columns:repeat(5,minmax(105px,1fr))}}@media(max-width:900px){nav div{display:none}.school-row{grid-template-columns:1fr}.people{grid-template-columns:repeat(5,130px);overflow-x:auto;padding-bottom:12px}.faculty-grid{grid-template-columns:repeat(7,130px)}header h1{font-size:40px}}@media(max-width:560px){header,.faculty,.group{width:88vw}.people{grid-template-columns:repeat(5,120px)}.faculty-grid{grid-template-columns:repeat(7,120px)}.school-row{gap:12px}.person h3{font-size:12px}}

/* v3 — faculty portrait normalization: preserve the approved 7-up scale,
   but normalize the perceived subject size with per-photo focal crops. */
.faculty .portrait{padding:6px;overflow:hidden;background:var(--paper)}
.faculty .portrait img{width:100%;height:100%;display:block;object-fit:cover;transform-origin:center center}
/* NTU faculty: crop/zoom individually rather than shrinking the whole source into the frame */
.faculty-ntu .person:nth-child(1) img{object-position:center 24%;transform:scale(1.02)}
.faculty-ntu .person:nth-child(2) img{object-position:center 30%;transform:scale(1.08)}
.faculty-ntu .person:nth-child(3) img{object-position:center 27%;transform:scale(1.72)}
.faculty-ntu .person:nth-child(4) img{object-position:center 23%;transform:scale(1.05)}
.faculty-ntu .person:nth-child(5) img{object-position:center 28%;transform:scale(1.08)}
.faculty-ntu .person:nth-child(6) img{object-position:center 27%;transform:scale(1.10)}
.faculty-ntu .person:nth-child(7) img{object-position:center 23%;transform:scale(1.08)}
/* PKU faculty: same outer frame and visual weight; source styles may differ, but not card scale */
.faculty-pku .portrait{background:var(--paper);padding:6px}
.faculty-pku .person:nth-child(1) img{object-position:center 27%;transform:scale(1.78)}
.faculty-pku .person:nth-child(2) img{object-position:center 22%;transform:scale(1.18)}
.faculty-pku .person:nth-child(3) img{object-position:center 25%;transform:scale(1.18)}
.faculty-pku .person:nth-child(4) img{object-position:center 23%;transform:scale(1.28)}
.faculty-pku .person:nth-child(5) img{object-position:center 26%;transform:scale(1.22)}
.faculty-pku .person:nth-child(6) img{object-position:center 24%;transform:scale(1.28)}
.faculty-pku .person:nth-child(7) img{object-position:center 25%;transform:scale(1.28)}

/* v3.1 — PKU faculty manual head-and-shoulders normalization.
   Layout and card size intentionally unchanged. */
.faculty-pku .portrait{overflow:hidden;padding:6px;background:var(--paper)}
.faculty-pku .portrait img{object-fit:cover;transform-origin:center center}
.faculty-pku .person:nth-child(1) img{object-position:50% 30%;transform:scale(3.05)}
.faculty-pku .person:nth-child(2) img{object-position:50% 18%;transform:scale(1.48)}
.faculty-pku .person:nth-child(3) img{object-position:50% 22%;transform:scale(2.25)}
.faculty-pku .person:nth-child(4) img{object-position:50% 20%;transform:scale(1.60)}
.faculty-pku .person:nth-child(5) img{object-position:50% 23%;transform:scale(1.46)}
.faculty-pku .person:nth-child(6) img{object-position:50% 22%;transform:scale(1.48)}
.faculty-pku .person:nth-child(7) img{object-position:50% 22%;transform:scale(1.55)}
/* v3.2: faculty photos are pre-cropped manually; display them uniformly without per-photo zoom/position hacks. */
.faculty .portrait img { width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; transform:none !important; }


/* v3.5 — unified NTU / PKU portrait treatment
   The frame remains visible, but the photo fills the frame consistently. */
.person .portrait{
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: #f2eee4;
  border: 1px solid rgba(42, 69, 60, .10);
}

/* Both universities use exactly the same image behavior. */
.person .portrait img,
.ntu-row .person .portrait img,
.pku-row .person .portrait img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Life photos often have more headroom than ID photos.
   Keep a slightly higher crop so faces are less likely to be cut off. */
.pku-row .person .portrait img{
  object-position: 50% 42%;
}

/* Remove any PKU-only inner mat / oversized frame left from the ID-photo version. */
.pku-row .portrait{
  padding: 0 !important;
}

nav a{color:inherit;text-decoration:none}

/* Approved readability sizes */
body>nav{font-size:15px}body>nav b{font-size:16px}.person h3,.faculty .person h3{font-size:18px;line-height:1.4}.faculty .person h3{font-size:16px}
footer{font-size:14px}footer b{font-size:16px}
@media(min-width:901px) and (max-width:1080px){body>nav{font-size:13px;padding:0 3vw}body>nav b{font-size:14px}}
@media(max-width:560px){.person h3{font-size:17px}.faculty .person h3{font-size:16px}}