@font-face {
    font-family: 'worksans';
    src: url(data/WorkSans-VariableFont_wght.ttf);
  }
  
  html, body {
    margin: 0;
    padding: 0;
    font-family: worksans, sans-serif;
    line-height: 1.6;
    color: #111;
    background: #fff;
  }
  
  /* Navigation */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    box-sizing: border-box;
    background: white; /* keeps text readable if page scrolls */
  }
  
  nav a {
    text-decoration: none;
    color: black;
    letter-spacing: 0.05em;
    font-weight: 400;
  }
  
  nav a:hover {
    font-weight: 600;
    transition: font-weight 0.2s ease;
    color: #0645AD;
  }
  
/* Main layout */
main.about-layout {
    display: flex;
    align-items: flex-start;   /* avoid stretching the shorter column */
    gap: 2rem;
    margin-top: 80px;
    padding: 0 2rem;
    box-sizing: border-box;
    height: calc(100vh - 80px);
    width: 100%;
  }
  
  /* Allow BOTH flex children to shrink within the row */
  main.about-layout > * {
    min-width: 0;
  }
  
  /* Left column (iframe) takes 3/4 */
  #about-stretch {
    display: block;
    flex: 3 1 0;          /* 3 parts vs 1 part on the right */
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
  }
  
  /* Right column */
  .about-side {
    flex: 1 1 0;          /* 1 part */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    font-size: 0.7rem;
  }
  
  /* Make sure media doesn't blow out the column */
  .about-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  /* Optional: keep the right column visible while scrolling */
  @media (min-width: 901px) {
    .about-side {
      position: sticky;
      top: 80px;          /* matches your nav offset */
      align-self: flex-start;
    }
  }
  
  /* Responsive stack */
  @media (max-width: 900px) {
    main.about-layout {
      flex-direction: column;
    }
    #about-stretch,
    .about-side {
      flex: none;
      width: 100%;
    }
    .about-image {
      max-width: 400px;
      margin-inline: auto;
    }
  }

  /* Hide the 'Involvements' heading */
 h3 {
    font-weight: 400;
    font-size: 0.9rem;
 }
  
  /* Remove bullets and left indent */
  .involvements ul {
    list-style: none;
    margin: 0;
    padding: 0;
   text-align: justify;
  }
  
  /* Extra safety for markers across browsers */
  .involvements li {
    list-style-type: none;
  }
  .involvements li::marker {
    content: '';
  }



  .contact-details {
    display: flex;
    flex-direction: column; /* stack each row vertically */
  }
  
  .contact-details h3,
  .contact-details a {
    margin: 0;
    font-size: 0.9rem; /* adjust to match sidebar scale */
  }
  
  .contact-details > div {
    display: flex;
    justify-content: space-between; /* pushes h3 left, p right */
    align-items: baseline;          /* align text nicely */
  }
  
  .contact-details a {
    text-decoration: none;
    color: inherit;       /* inherit sidebar color */
    font-weight: 400;
    transition: font-weight 0.2s ease;
  }
  
  .contact-details a:hover {
    font-weight: 600;     /* bolder on hover */
    color: #0645AD;
  }