/* ========== Local web-fonts (self-hosted) ========== */
@font-face{
  font-family:'IBM Plex Sans';
  src:url('assets/fonts/ibm-plex-sans-v22-latin-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('assets/fonts/ibm-plex-sans-v22-latin-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Merriweather';
  src:url('assets/fonts/merriweather-v32-latin-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Merriweather';
  src:url('assets/fonts/merriweather-v32-latin-900.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}


/* ============  Core Variables ============ */
:root {
  --font-headline: 'Merriweather', serif;
  --font-body:'IBM Plex Sans', sans-serif;

  --clr-dark: #000000;
  --clr-light: #ffffff;
  --clr-mid: #f5f5f5;        /* neutral backdrop */
  --clr-purple: #6E4AD1;     /* subtle accent */
}
/* ============  Reset & Typography  ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-weight:300;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  color:var(--clr-dark);
  background:var(--clr-light);
}
h1,h2,h3{font-family:var(--font-headline);font-weight:900;line-height:1.2;}
h1{font-size:clamp(2.6rem,4vw,3.8rem);}
h2{font-size:clamp(1.9rem,3.5vw,3rem);}

/* ============  Navigation  ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.25rem 2.5rem;
  background:var(--clr-dark);
}
.logo a{
  color:var(--clr-light);text-decoration:none;font-family:var(--font-headline);
  font-weight:900;font-size:1.8rem;letter-spacing:.04em;
}
#nav-toggle{display:none;background:none;border:none;color:var(--clr-light);font-size:1.8rem;cursor:pointer;}
.nav-list{list-style:none;display:flex;gap:2rem;}
.nav-list a{color:var(--clr-light);text-decoration:none;font-weight:600;font-size:1.15rem;}
.nav-list a:hover{color:var(--clr-purple);}
@media(max-width:768px){
  #nav-toggle{display:block;}
  .nav-list{position:absolute;top:100%;right:1.5rem;flex-direction:column;
            background:var(--clr-dark);border:1px solid rgba(255,255,255,.1);
            width:220px;max-height:0;overflow:hidden;transition:max-height .3s;}
  .nav-list.open{max-height:380px;}
  .nav-list li{padding:1rem 1.25rem;}
}



.navbar-left a:hover {
  text-decoration: underline;
}
/* ============  Hero Blocks  ============ */
.hero{
  display:grid;
  grid-template-columns: minmax(auto,600px) minmax(320px,1fr);
  gap:3rem;
  align-items:center;
  padding:6.5rem 6vw 6rem;   /* top offset for fixed nav */
}
.hero.reverse{grid-template-columns: minmax(320px,1fr) minmax(auto,600px);}
.hero-content{max-width:600px;}
.hero-content p{margin-top:1.25rem;max-width:60ch;}
.hero-skull .hero-content p,
.hero-chimp .hero-content p,
.hero-cas9 .hero-content p {
  text-align: justify;
  text-justify: inter-word;
}
.hero-image{justify-self:center;}
/* base */
.hero-image img{
  max-width:450px;
  height:auto;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.hero-skull{padding-top:8rem;background:var(--clr-dark);color:var(--clr-light);}
 /* illustration is wide */
.hero-chimp{background:var(--clr-mid);}
.hero-cas9{background:#ebe6ff;}
@media(max-width:900px){
  .hero,.hero.reverse{
    grid-template-columns:1fr;
    gap:2rem;
  }
  /* base */
.hero-image img{max-width:100%;height:auto;}
}
/* ============  Footer  ============ */
.site-footer{text-align:center;padding:2rem 1rem;background:#111;color:#aaa;font-size:.9rem;}



/* dual skull container */
.dual-skull{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
}
.dual-skull img{
  max-width:260px;
  height:auto;
}
@media(min-width:1000px){
  .dual-skull{
    flex-direction:row;
    gap:2rem;
  }
  .dual-skull img{
    max-width:300px;
  }
}


/* publication list */
.pub-list{margin-top:2rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:1.75rem;font-size:1.05rem;}
.pub-list li{line-height:1.4;}
.pub-list .title{font-weight:700;}
.pub-list a{color:var(--clr-primary);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;}
.pub-list a:hover{border-color:var(--clr-primary);}

/* dark publications page */
body.pub-page{background:#000;color:#fff;}
.pub-list a{color:var(--clr-primary);}
.pub-list a:hover{color:#9b7dff;}

/* publications layout tweaks */
body.pub-page .content-wrapper{padding-top:9rem;}
.pub-list li{margin-bottom:3rem;font-size:1.15rem;line-height:1.55;}
.pub-list .authors{color:#bfbfbf;}
.pub-list .authors strong{color:#ffffff;font-weight:900;}

/* pub-page heading tweaks */
body.pub-page h1{
  font-size:2.2rem;
  margin-bottom:2.5rem;
}
/* links brighter */
body.pub-page .pub-list a{
  color:#9b7dff;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
body.pub-page .pub-list a:hover{
  border-color:#9b7dff;
}

/* finer typography and indentation */
body.pub-page .content-wrapper{
  padding-left:4rem;
  padding-right:2rem;
  max-width:900px;
  margin:0 auto;
}
body.pub-page h1{
  font-size:1.8rem;
  margin-bottom:2rem;
}
.pub-list li{
  font-size:1.0rem;
  margin-bottom:2.5rem;
}

/* new hyperlink colour */
body.pub-page .pub-list a{color:#58c4ff;} /* soft aqua */
body.pub-page .pub-list a:hover{color:#8dd7ff;border-color:#8dd7ff;}

/* ===== People Page ===== */
body.people-page{background:#fff;color:#000;}
.people-wrapper{padding-top:9rem;padding-bottom:7rem;text-align:center;}
.people-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:4rem;margin-top:3rem;}
.person-card{max-width:220px;display:flex;flex-direction:column;align-items:center;gap:1rem;}
.avatar{width:220px;height:220px;border-radius:50%;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.person-card h2{font-size:1.25rem;font-weight:600;margin:0;}
.person-card .role{font-size:1.05rem;color:#555;margin:0;}

body.people-page h1{font-size:1.8rem;margin-bottom:2rem;}


.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.ntu-logo-right img {
  height: 36px;
  width: auto;
  margin-left: 1rem;
}


.nav-container nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.nav-container nav a {
  margin-left: 1rem;
}

.ntu-logo-right img {
  height: 36px;
  width: auto;
  margin-left: 1.5rem;
}


.nav-right-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-container nav a {
  margin-left: 0;
  color: white;
  text-decoration: none;
  font-size: 1rem;
}

.ntu-logo-right img {
  height: 36px;
  width: auto;
}


.navbar {
  background-color: black;
  color: white;
  padding: 20px 0;
  font-family: 'IBM Plex Sans', sans-serif;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-left {
  font-size: 1.8em;
  font-weight: 600;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.navbar-right nav a {
  color: white;
  text-decoration: none;
  font-size: 1em;
  margin-right: 20px;
}

.ntu-logo {
  height: 36px;
}

.navbar-left a {
  color: white;
  text-decoration: none;
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
}

/* ===== Join Page hero variant ===== */
.hero-join h1{
  font-size: clamp(2rem, 4vw, 3rem);
}

.hero-join .hero-content p {
  text-align: justify;
  text-justify: inter-word;
}

.hero-join .hero-image img{
  max-width: 620px;
}

.join-section{
  padding: 6rem 6vw;
  max-width: 900px;
  margin: 0 auto;
}

.join-section h2{
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 1.25rem;
}

.join-section p{
  margin-top: 1rem;
  max-width: 60ch;
}

.join-fellowships{
  background: var(--clr-mid);
}

.join-address{
  background: var(--clr-light);
}


/* === Tweaks for hero-alt (Research section 2) === */
.hero-alt{
  padding: 5rem 6vw; /* slightly tighter vertical spacing */
}

.hero-alt .hero-image img{
  max-width: 780px; /* allow wider display for panoramic figure */
}


/* === Fine-tune research hero alignment & sizing === */
body.research-page .hero-image{
  display: flex;               /* enable centering */
  align-items: center;          /* vertical centre relative to text */
}

.hero-research .hero-image img{
  align-self: center;       /* default, probably already set */
  margin-top: 12rem;         /* this repositions the whole image block */
  max-width: 620px;
}

.hero-alt .hero-image img{
  align-self: center;       /* default, probably already set */
  margin-top: 9rem;         /* this repositions the whole image block */
  max-width: 620px;             /* match first figure */
}

.hero-research,
.hero-alt{
  padding: 5.5rem 6vw;          /* slightly tighter without crowding */
}

/* === Justify research-page paragraph text === */
body.research-page .hero-content p {
  text-align: justify;
  text-justify: inter-word;
}

/* === Offset images to centre relative to body text (exclude headline) === */
.hero-research .hero-image,
.hero-alt .hero-image{
  padding-top: 2.2rem;   /* tweak until visually centred */
}


/* ===== Mobile nav (no flicker) ===== */


/* -------------------------------------------------
   HERO 2-column ➜ 1-column  (mobile-first flexbox)
   ------------------------------------------------- */
.hero{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.hero.reverse{
  flex-direction:row-reverse;
}
.hero-image{flex:1 1 480px;}
.hero-content{flex:1 1 420px;}
.hero-image img{
  width:100%;
  height:auto;
  max-width:none;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
@media (max-width:768px){
  .hero,
  .hero.reverse{
    flex-direction:column;
    text-align:left;
  }
  .hero-image,
  .hero-content{
    flex:1 1 100%;
    max-width:100%;
  }
}


/* === Mobile navbar layout (burger removed) === */
@media (max-width: 768px) {
  /* Hide the burger icon entirely */
  #nav-toggle{
    display:none !important;
  }

  /* Stack logo + nav vertically */
  .navbar-container{
    flex-direction: column;
    align-items: center;
  }

  .navbar-left{
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
  }

  /* 2×2 grid of full‑width buttons */
  .navbar-right{
    width: 100%;
    justify-content: center;
  }

  .navbar-right nav{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.75rem;
    width: 100%;
    justify-items: center;
  }

  .navbar-right nav a{
    padding: 0.75rem 0.5rem;
    background: var(--clr-dark);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
  }

  .navbar-right nav a:hover{
    background: var(--clr-purple);
  }

  /* Optional: hide NTU logo on small screens for simplicity */
  .ntu-logo{
    display: none;
  }
}

/* Prevent any accidental horizontal scroll */
body{
  overflow-x:hidden;
}

@media (max-width: 768px) {
  .hero {
    padding-top: 3.5rem;  /* reduced from 6.5rem for tighter spacing under mobile nav */
  }
}

/* ---- Mobile hero-image offset reset --------------------------- */
@media (max-width: 900px) {
  .hero-research .hero-image img,
  .hero-alt      .hero-image img {
    margin-top: 0;       /* remove desktop-only vertical offset */
  }
}


/* === People Page Bio Hero Section === */
.bio-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 2rem 6vw;
  margin-top: 5rem;
  gap: 1.25rem; /* balance between image and text */
}

.bio-hero .hero-image img {
  max-width: 260px;  /* size compromise */
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);  /* match other hero images */
}

.bio-hero .hero-content {
  max-width: 540px;
  text-align: justify;
  text-justify: inter-word;
  padding-right: 2rem;
}

.bio-hero .hero-content h2 {
  text-align: center;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .bio-hero .hero-image {
    display: none;
  }
  .bio-hero .hero-content {
    padding-right: 0;
  }
}


/* === Research page: force single-column hero === */
body.research-page .hero,
body.research-page .hero.reverse{
  display:flex;
  flex-direction:column;
  gap:3rem;
  padding:5.5rem 6vw;
}

body.research-page .hero-image,
body.research-page .hero-content{
  flex:none;
  max-width:700px;
  margin:0 auto;
}

body.research-page .hero-image img{
  margin-top:0;
  width:100%;
  max-width:700px;
}


/* === Research page single-column refinement v2 === */
body.research-page{
    font-size: 16px;   /* slightly smaller base font */
}
/* === Research page: restore global nav size === */
body.research-page .navbar,
body.research-page .navbar-left,
body.research-page .navbar-right nav a{
    font-size: 1.125rem;   /* 1.125 × 16 px  = 18 px */
}
body.research-page .hero,
body.research-page .hero-alt{
    padding:4.5rem 5vw;   /* tighter vertical rhythm */
}
body.research-page .hero-content,
body.research-page .hero-image{
    max-width:820px;      /* wider column */
}
body.research-page .hero-content p,
body.research-page .hero-content ul{
    max-width:70ch;       /* comfortable line length */
}
body.research-page .hero-image img{
    margin-top:0;
}
/* ensure list spacing */
body.research-page ul{
    margin-top:1.25rem;
    padding-left:1.25rem;
}

body.research-page ul li {
    margin-bottom: 1.25rem;
}

/* === Final alignment tweaks === */
body.research-page .hero-image img {
  margin-top: 0 !important; /* remove old offsets */
}

.hero-research .hero-image,
.hero-alt .hero-image {
  padding-top: 0 !important; /* remove extra padding */
}

body.research-page .hero-content {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

body.research-page .hero-content p,
body.research-page .hero-content ul {
  max-width: 820px;
}

body.research-page .hero-image {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}