div.quarto-title h1.title {
  display: none;
}

  /* Hide AnchorJS links */
  .anchorjs-link {
    display: none !important;
  }
<!-- Include FontAwesome (used for icons if needed later) -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
  integrity="sha512-PRV2fA8MdRJnRvW1bTbK52rwFUnFUpqJeM7KMVke1NvStS3mGLH6Lulx/1YOjzA8wfy7o+ZZtPHztDNg+Eds0w=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

    /* Global styles */
    body {
      font-family: "Nunito Sans", sans-serif;
      background: rgba(165, 194, 240, 0.315);
      color: white;
    }

    section#team.level2 h2.anchored{
      font-size: 2rem;
      color: white;
    
    }

    #container {
      padding: 1rem;
      max-width: 1000px;
      margin: 1rem auto;
      justify-content: center;
    }

    .user-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-auto-rows: minmax(350px, auto);
      grid-gap: 0.9rem;
    }

    .card {
      position: relative;
      padding: 1rem;
      background-color: #ffffff;
      overflow: hidden;
      transition: all 0.4s ease-in-out;
      height: 350px; /* Fix to keep uniform look */
      transform: scale(1); /* base */
      border-radius: 20px;
    }
    
    .card .card-link {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent; /* Ensure transparency */
      text-decoration: none;
      color: inherit;
      z-index: 10; /* Place it above inner content if needed */
    }
    
    /* Prevent overlapping elements (like border animations) from intercepting clicks */
    .border-animate {
      pointer-events: none;
    }

    .card:hover {
      transform: scale(1.03); /* 👈 slight zoom effect */
      background-position: 40%;
    }

    @keyframes bioGlow {
      0% {
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
      }
      50% {
        box-shadow:
          0 2px 6px rgba(142, 197, 252, 0.35),   /* #8EC5FC */
          0 0 5px rgba(208, 232, 242, 0.2);       /* #D0E8F2 */
      }
      100% {
        box-shadow:
          0 3px 10px rgba(142, 197, 252, 0.45),
          0 0 10px rgba(208, 232, 242, 0.3);
      }
    }
    
    .bio {
      position: absolute;
      bottom: 15px;
      left: 10px;
      right: 10px;
      width: fit-content;
      max-width: 100%;
      height: auto;
      /* The latter overflow value wins, so using only hidden */
      overflow: hidden;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 12px;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
      transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
      transform: scale(1); /* default */
      display: grid;
      align-items: start;
      row-gap: 0.2rem;
      padding: 0.5rem 0.4rem 0rem 0.5rem;
      z-index: 1;
      will-change: transform, box-shadow;
    }
    
    .bio h3 {
      display: inline-block;        /* Limits height to text content */
      vertical-align: top;
      /* Removed duplicate font-weight; kept one instance */
      font-weight: 300;
      /* Initial background gradient (note: only the last background declaration applies) 
      */
      background: linear-gradient(90deg, #7AB0E2, #00BFFF, #7AB0E2);
      background-size: 200%;
      background-position: 0% 50%;
      color: white;                 /* Start as white text */
      -webkit-background-clip: text;
      background-clip: text;
      width: 90%;
      margin: 0;                    /* Remove default spacing */
      padding: 0;                   /* Remove internal spacing */
      line-height: 1;               /* Compact line */
      font-size: clamp(0.8rem, 10vw, 0.9rem);
      transition: color 0.3s ease-in-out, background-position 0.6s ease-in-out,       
      -webkit-text-fill-color 0.3s ease-in-out;
    }
    
    .bio p {
      color: white;
      font-size: clamp(0.65rem, 0.6vw, 0.5rem);
      margin: 0 0 0.3rem 0;         /* Remove default spacing */
    }
    
    .card:hover .bio {
      transform: scale(1.05);
      animation: bioGlow 0.6s ease-out forwards;
      box-shadow:
        0 2px 10px rgba(122, 176, 226, 0.4), /* Soft blue glow */
        0 0 10px rgba(0, 191, 255, 0.25);      /* Deeper edge fill */
    }
    
    
    
    .bio::-webkit-scrollbar {
      width: 4px;
    }
    
    .bio::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
    }

/* Profile-tied backgrounds (replace nth-child rules with these) */
.card.member-petros   { background: url("images/members/petros.png")  no-repeat center 30% / cover; }
.card.member-eva      { background: url("images/members/eva.jpg")     no-repeat center 30% / cover; }
.card.member-fernando { background: url("images/members/fae.jpg")     no-repeat center 60% / cover; }
.card.member-eline    { background: url("images/members/eline_2025.png")   no-repeat center 35% / cover; }
.card.member-hawre    { background: url("images/members/hawre.jpg")   no-repeat center 10% / cover; }
.card.member-dugartre    { background: url("images/members/dugartre.png")    no-repeat center 20% / cover; }
.card.member-amoskalewicz   { background: url("images/members/amoskalewicz.JPG")  no-repeat center 20% / cover; }
.card.member-matt     { background: url("images/members/matt.jpg")    no-repeat center 20% / cover; }
.card.member-jorge     { background: url("images/members/jorge.jpg")    no-repeat center 20% / cover; }

.card.member-alan     { background: url("images/members/alan.jpg")    no-repeat center 20% / cover; }
.card.member-myriam   { background: url("images/members/myriam.png")  no-repeat center 20% / cover; }

/* Specific override for Fernando's long name */
.card.member-fernando h3 {
  width: fit-content;
  white-space: nowrap;
}

    
    /* Specific Override for Card 3 Heading */
    .card:nth-child(3) h3 {
      width: fit-content;       /* Let content define width */
      white-space: nowrap;      /* Prevent line break if desired */
    }
    
    /* Border Animation Base */
    .border-animate {
      position: absolute;
      background-color: white;
      transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); /* Super smooth curve */
      z-index: 2;
    }
    
    /* Top-left Border */
    .top-left {
      background: linear-gradient(90deg, #8EC5FC 0%, #8EC5FC 50%, #8EC5FC 100%);
      width: 0%;
      height: 3px;
      border-radius: 20px;
      top: 7px;      /* Pull away from top */
      left: 15px;    /* Pull away from left */
    }
    
    .top-left::after {
      content: '';
      position: absolute;
      width: 2px;
      height: 0%;
      background-color: linear-gradient(90deg, #8EC5FC 0%, #8EC5FC 50%, #8EC5FC 100%);
      border-radius: 20px;
      top: 0;
      left: 0;
      transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }
    
    /* Bottom-right Border */
    .bottom-right {
      width: 0%;
      border-radius: 20px;
      background: linear-gradient(90deg, #8EC5FC 0%, #8EC5FC 50%, #8EC5FC 100%);
      height: 3px;
      bottom: 7px;     /* Pull away from bottom */
      right: 15px;     /* Pull away from right */
    }
    
    .bottom-right::after {
      content: '';
      border-radius: 20px;
      position: absolute;
      width: 2px;
      height: 0%;
      background-color: linear-gradient(90deg, #8EC5FC 0%, #8EC5FC 50%, #8EC5FC 100%);
      bottom: 0;
      right: 0;
      transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }
    
    /* Hover Animations */
    .card:hover .top-left {
      width: calc(100% - 30px); /* Adjust for inset */
    }
    
    .card:hover .top-left::after {
      height: calc(100% - 30px);
    }
    
    .card:hover .bottom-right {
      width: calc(100% - 30px);
    }
    
    .card:hover .bottom-right::after {
      height: calc(100% - 30px);
    }
    
    
/* Force 3 equal columns for Former members */
.user-container.three-fixed {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  grid-auto-rows: minmax(350px, auto);
  grid-gap: 0.9rem;
}

/* Stay responsive on smaller screens */
@media (max-width: 900px) {
  .user-container.three-fixed {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}
@media (max-width: 560px) {
  .user-container.three-fixed {
    grid-template-columns: 1fr;
  }
}