/* all styles from rev 13*/
      *,
      *::before,
      *::after {
      box-sizing: border-box;
      }
    h1, h2, h3, h4, h5, h6, p, a {
      margin: 0; /* Removes all margins */
    }
    body {
      background-color: hsla(var(--Black), 1);
      margin: 0;
    }
    html {
      font-size: 16px; /* Base font size */
      font-family: "Poppins", verdana, sans-serif;
      scroll-behavior: smooth; /* Smooth scrolling */
      margin: 0;
      padding: 0;
    }
    select {
      all: unset; /* Reset all default styles */
      appearance: none; /* Remove default dropdown styling */
      -webkit-appearance: none; /* Remove default styling in WebKit browsers (Chrome, Safari) */
      -moz-appearance: none; /* Remove default styling in Firefox */
      background: hsla(var(--Black), 0.5); /* Custom background color */
      color: hsla(var(--White), 1); /* Custom text color */
      border: 1px solid hsla(var(--White), 0.5); /* Custom border */
      border-radius: 0; /* Explicitly set border radius to 0 */
      padding: 10px 12px; /* Add padding for better spacing */
      font-family: "Poppins", sans-serif; /* Custom font */
      font-size: 14px;
      width: 100%; /* Ensure it spans the container */
      cursor: pointer; /* Make it look clickable */
    }

    select:focus {
        outline: none; /* Remove default focus outline */
        border-color: hsl(var(--Red)); /* Add custom focus border color */
        border-radius: 0; /* Ensure no rounded corners on focus */
    }

    select option {
        background-color: hsla(var(--Black), 1); /* Background color for options */
        color: hsla(var(--White), 1); /* Text color for options */
        border-radius: 0; /* Ensure no rounded corners for options */
    }

      #primaryGrid {
      position: relative;
      top: 110px;
          display: grid;
          grid-template-columns: 70% 30px 28%;
          
      padding: 0px 24px 0px 24px;
          color: hsla(var(--White), 1);
      width: 100%;
      margin: 0 auto;
      }
    
    #customCursor {
      font-family: "fractul-variable", sans-serif;  
      position: fixed;
        padding: 16px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        font-size: 14px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none; /* Prevent the cursor from interfering with mouse events */
        transform: translate(-50%, -50%);
        z-index: 9999;
        display: none;   /* Initially hidden */
    }
      
    .backgroundImage {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--primary-grid-bg, url('/media/member_files/upload/<?= $isProfileView && $memberData ? htmlspecialchars($memberData['default_image']) : 'X981.22.1.8_u.jpg' ?>')) no-repeat center center;
      background-position: center calc(-100px);
      background-size:cover;
      filter: blur(8px); /* Apply blur effect */
      z-index: -1; /* Place it behind the content */
      opacity: 0.5; /* Fully visible by default */
      transition: opacity 0.5s ease-in-out; /* Smooth fade effect */
    }
      #primaryGrid .searchTools {
          border-right: 1px solid hsla(var(--White), .5);
      
      background-color: hsla(var(--Black), 0.75);
          display: flex;
          flex-direction: column;
      }
      .searchTools .filterContainer {
              display: flex;
              flex-direction: column;
              gap: 1px;
          }
    
      #primaryGrid .searchTools .resultList {
          width: 100%;
          height: 100%;
      display: flex;
          flex-direction: column;
          overflow-y: auto; /* Enable vertical scrolling */
      overflow-x: hidden;
      max-height: 73vh; /* Set a maximum height */
      border-bottom: 1px solid hsla(var(--White), .5);
      }
      #primaryGrid .searchTools .resultCount {
        padding: 8px;
      }
  

    #primaryGrid .searchTools .resultList h2 {
      text-transform: uppercase;
      font-family: "fractul-variable", sans-serif;
      font-size: 16px;
      color: white;
      text-align: left;
      margin: 0px 0px -2px 0px;
    }
    #primaryGrid .searchTools .resultList p {
      font-family: "Poppins", Verdana, sans-serif;
      font-size: 12px;
      color: white;
      text-align: left;
      line-height: 1;
      margin: 6px 0px 0px 0px;
    }
    #primaryGrid .searchTools .resultList a {
      color: white;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    #primaryGrid .searchTools .resultList a:hover {
      color: hsl(var(--Red));
    }
    #primaryGrid .searchTools .resultList a:active {
      color: hsl(var(--Red));
    }
    #primaryGrid .searchTools .resultList .memberItem {
      border-top: 1px solid hsla(var(--White), .5);
      display: flex;
      flex-direction: row;
      transition: background-color 0.3s ease;
    }
    #primaryGrid .searchTools .resultList .memberItem:hover {
      background-color: hsla(var(--Red), 1); /* Background color on hover */
    }
    #primaryGrid .searchTools .resultList .memberItem:last-of-type
    { border-bottom: 1px solid hsla(var(--White), .5); }

    #primaryGrid .searchTools .resultList .nameAndCat {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #primaryGrid .searchTools .resultList .memberItem img {
      min-width: 100px; /* Set a fixed width */
      max-width: 100px; /* Set a fixed width */
      height: 100px; /* Set a fixed height */
      border-right: 1px solid hsla(var(--White), .5);
      object-fit: cover; /* Ensures the image is cropped to fill the container */
      margin-right: 16px; /* Space between image and text */
      display: block;
    }
      .searchTools .listItem {
          display: flex; 
          flex-direction: row; 
          padding: 5px; 
          border-top: 1px solid hsla(var(--White), .5);
      }
      .searchTools .keywordSearch {
        width: 100%;
        border: 1px solid hsla(var(--White), .5);
        margin: 0;
        background-color: hsla(var(--Black), 0.5);
        color: white;
        font-family: 'Poppins', Verdana, sans-serif;
      }
      .keywordSearch input[type="text"] {
        width: 100%;
        padding: 10px 12px;
        background: hsla(var(--Black), 0.5);
        color: hsla(var(--White), 1);
        border: 1px solid hsla(var(--White), 0.5);
        font-family: "Poppins", sans-serif;
        font-size: 14px;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

    .keywordSearch input[type="text"]:hover {
        border-color: hsl(var(--Red));
    }

    .keywordSearch input[type="text"]:focus {
        outline: none;
        background: hsla(var(--Red), 0.2);
        border-color: hsl(var(--Red));
    }

    .keywordSearch input[type="text"]::placeholder {
        color: hsla(var(--White), 0.7);
        font-family: "Poppins", sans-serif;
        font-size: 14px;
    }
      #primaryGrid .featureContent {
          display: flex;
          flex-direction: column;
      padding: 32px 0px 32px 0px;
      background-color: hsla(var(--Black), 0.75);
          overflow-y: auto; /* Enable vertical scrolling */
      overflow-x: hidden;
          border-left: 1px solid hsla(var(--White), .5);
          
      }
  
    #primaryGrid .featureContent::-webkit-scrollbar-track {
      background: hsla(var(--Black), 0.75);
    }
    #primaryGrad .featureContent {
      scrollbar-color: hsla(var(--White), 0.75) hsla(var(--Black), 0.5);
      scrollbar-width: thin;
    }
      #primaryGrid .alphaNav {
          display: flex;
          text-align: center;
          flex-direction: column;
      background-color: hsla(var(--Black), 0.75);
          border-left: 1px solid hsla(var(--White), .5);
          
      border-right: 1px solid hsla(var(--White), .5);
          padding-top: 10px;
      padding-bottom: 10px;
          line-height: 2;
      max-width: 50px;
      }
    
      #primaryGrid .alphaNav a {
          color: hsla(var(--White), 1);
          text-decoration: none;
          font-weight: bold;
      }
    #primaryGrid .alphaNav a:hover {
      color: hsl(var(--Red));
    }
    #primaryGrid .alphaNav a.active {
      color: hsl(var(--Red));
    }

      #introFeature {
          box-sizing: border-box;
      display: grid;
          grid-template-columns: 40% 60%;
          grid-gap: 24px;
          width: 100%;
      height: 100%;
      padding-top: 32px;
      }
      #introFeature h1,
      #introFeature h2,
      #introFeature a {
      font-family: "fractul-variable", sans-serif;
      }
      #introFeature h1 {

          color: white;
      }
      #introFeature h2 {
          font-size: 2em;
          color: hsl(var(--Red));
      margin-bottom: 16px;
      }
      #introFeature .boxLink {
          display: block;
      width: fit-content; 
          border: 1px solid hsla(var(--Red), 1);
          color: hsla(var(--Red), 1);
          font-size: 14px;
      font-weight: 600;
          padding: 6px 10px 4px 10px;
          text-align: center;
      }
      
      .iframeWrapper {
      position: relative;
      width: 100%; /* Full width */
      padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625 or 56.25%) */
      overflow: hidden; /* Ensure no overflow */
          border: 1px solid hsla(var(--White), 1);
      }

    .iframeWrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      border: 0; /* Remove default border */
    }
      .alphaBar {
      background: hsla(var(--Black), 0);
      font-family: "fractul-variable", sans-serif;
      }
      ul.tabs {
      margin: 0;
      padding: 0;
      }

      .tabsSection {
          width: 100%;
          }
          
      .tabs li {
          margin: 0 2px 0 0;
          list-style: none;
          display: block;
          }
          
      .alphaBar a {
          padding: 0 3px;
          display: inline-block;
          color: #ccc;
          text-decoration: none !important;
          position: relative;
          text-decoration: underline;
          -moz-transition: color 0.3s ease; 
          -o-transition: color 0.3s ease; 
          -webkit-transition: color 0.3s ease; 
          transition: color 0.3s ease; 
          }

      .alphaBara:hover {
          color:hsl(var(--Red));
          }
              
      .alphaBar a.active {
          font-size: 21px;
          color:hsl(var(--Red));
          position: relative;
          top: 1px;
          z-index: 3;
          }
      /* Fade-in effect */
    .fade-in {
        opacity: 0; /* Start fully transparent */
        transition: opacity 0.5s ease-in; /* Smooth transition */
    }

    .fade-in.visible {
        opacity: 1; /* Fully visible */
    }
    .custom-dropdown {
              position: relative;
              width: 100%;
          }
          
          .dropdown-button {
              width: 100%;
              padding: 10px 12px;
              background: hsla(var(--Black), 0.5);
              color: hsla(var(--White), 1);
              border: 1px solid hsla(var(--White), 0.5);
              font-family: "Poppins", sans-serif;
              font-size: 14px;
              text-align: left;
              cursor: pointer;
              transition: all 0.3s ease;
          }
          
          .dropdown-button:hover {
              border-color: hsl(var(--Red));
          }
          
          .dropdown-button.active {
              background: hsla(var(--Red), 0.2);
              border-color: hsl(var(--Red));
          }
          
          .dropdown-list {
              display: none;
              position: absolute;
              top: 100%;
              left: 0;
              right: 0;
              background: hsla(var(--Black), 0.95);
              border: 1px solid hsla(var(--White), 0.5);
              border-top: none;
              max-height: 70vh;
              overflow-y: auto;
              z-index: 1000;
              list-style: none; /* Remove bullet points */
              margin: 0; /* Remove default margin */
              padding: 0; /* Remove default padding */
          }
          
          .dropdown-list li {
              padding: 10px 12px;
              color: hsla(var(--White), 1);
              cursor: pointer;
              border-bottom: 1px solid hsla(var(--White), 0.2);
              font-family: "Poppins", sans-serif;
              font-size: 14px;
              list-style: none;
          }
          
          .dropdown-list li:hover {
              background: hsla(var(--Red), 1);
          }
          
          .dropdown-list li:last-child {
              border-bottom: none;
          }
/* HM Profile Detail Styles */
  @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
      #hmProfile {
        display: grid;
        grid-template-columns: 30% 70%;
        width: 100%;
      }
      #hmProfile h1 {
        font-family: "EB Garamond", serif;
        font-weight: 400;
        color: white;
        font-size: 3em;
        text-align: left;
        padding-left: 12px;
        padding: 12px 24px 12px 0px;
        line-height: 100%;
      }
      @media screen and (max-width: 1366px) {
        #hmProfile h1 {
          font-size: 1.75em;
        }
      }
      #hmProfile h2 {
        font-family: "Fractul-variable", sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        color: white;
        font-size: 20px;
        letter-spacing: 1px;
        text-align: left;
        padding: 8px 24px 5px 0px;
        border-bottom: 1px hsla(var(--White), .5);
      }
      #hmProfile a {
        color: hsla(var(--Red), 1);
        text-decoration: underline;
       
      }
     
      #hmProfile a:hover {
        color: hsla(var(--White), 1);
      }
      #hmProfile .profileSummary {
        border-top: 1px solid hsla(var(--White), .5);
        border-right: 1px solid hsla(var(--White), .5);
        border-bottom: 1px solid hsla(var(--White), .5);
      }
      #hmProfile .profileSummary img {
        width: 100%;
        border-bottom: 1px solid hsla(var(--White), .5);
      }
      #hmProfile .detailItem {
        text-align: left;
        padding: 12px 24px 12px 24px;
        border-bottom: 1px solid hsla(var(--White), .5);
      }

       #primaryGrid .featureContent {
        padding-top: 0;
      }
      
      .profileDetails .subTitleBlock {
        border-bottom: 1px solid hsla(var(--White), .5);
        padding: 10px;
      }
      .profileDetails .highlights {
        padding: 24px;
      }
      .profileDetails .highlights p {
        font-family: "Poppins", verdana, sans-serif;
        font-weight: 300;
        color: white;
      }
      .profileDetails .highlights .highlightItem {
        padding-bottom: 16px;
        border-bottom: 1px solid hsla(var(--White), .5);
        margin-bottom: 16px;
      }

      .profileDetails .story {
        padding: 24px;
        font-family: "Poppins", verdana, sans-serif;
      }
      .profileDetails .story p {
        font-family: "Poppins", verdana, sans-serif;
        font-weight: 300;
        color: white;
        font-size: 1em;
        text-align: left;
        line-height: 1.5;
        margin: 0px 0px 12px 0px;
      }

      .profileDetails .media {
        
        margin: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .profileDetails .photoGallery {
        column-count: 2; /* Number of columns */
        column-gap: 16px; /* Spacing between columns */
        padding: 24px;
        
      }

      .profileDetails .photoGallery img {
          width: 100%; /* Ensure images fill their container */
          margin-bottom: 16px; /* Spacing between images */
          border: 1px solid hsla(var(--White), 0.5); /* Optional: Add a border */
          display: block; /* Prevent inline spacing issues */
      }
      .profileDetails .right-aligned {
        text-align: right;
      }
      .profileDetails .left-aligned {
        text-align: left;
      }
      .artefactGallery {
        padding: 24px;
      }
      .artefactGallery .artefactItem {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: left;
        text-align: left;
        border-bottom: 1px solid hsla(var(--White), .5);
        margin-bottom: 24px;
      }
      .artefactItem img {
        width: 200px; /* Set a fixed width for the image */
        height: auto; /* Maintain aspect ratio */
        margin-right: 16px; /* Space between image and text */
        border: 1px solid hsla(var(--White), 0.5); /* Optional: Add a border */
      }
      .fade-in {
    opacity: 0; /* Start fully transparent */
    transition: opacity 0.5s ease-in; /* Smooth transition */
  }

  .fade-in.visible {
    opacity: 1; /* Fully visible */
  }
  .randomHM {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 90%;
      transition: opacity 0.5s ease-in-out;
  }
  .randomHM h1 {
      font-family: "fractul-variable", sans-serif;
      font-weight: 600;
      color: white;
      font-size: .5em;
      text-align: center;
  }
  .randomMember {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    gap: 16px;
  }
  .randomMember .memberImg {
      height: 500px;
      width: auto;
      max-width: 500px;
      object-fit: cover;
      border: 1px solid hsla(var(--White), .5);
  }
  .randomMember h3 {
      font-family: "EB Garamond", serif;
      font-weight: 400;
      color: white;
      font-size: 2em;
      text-align: center;
  }
  .randomMember a {
    text-decoration: none;
  }
  @media screen and (max-width: 1366px) {
      .randomMember h3 {
          font-size: 1em;
      }
  }
  .randomMember p {
      font-family: "Poppins",Verdana,sans-serif;
      font-weight: 400;
      color: white;
      font-size: 1em;
      text-align: center;
  }
  .randomMemberLink {
      color: white;
      text-decoration: none;
      transition: color 0.3s ease;
  }
  .introMessage {
    justify-content: flex-start;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    justify-content: space-between;
  }
  .introMessage p {
    font-family: "Poppins", Verdana, sans-serif;}
  .introMessage h1 {
    font-size: 64px;
    margin: 32px 0px 32px 0px;
    text-transform: uppercase;
  }
  .introMessage a {
    font-family: "fractul-variable", sans-serif;
    color: white;
    background-color: hsl(var(--Red));
    text-decoration: none;
    padding: 12px 18px 9px 18px; 
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  .introMessage a:hover {
      background-color: white; /* Change background to white */
      color: hsl(var(--Red)); /* Change text color to red */
  }
  /* Add tooltip styles */
.tooltip {
    position: fixed;
    background: hsla(var(--Black), 0.7);
    color: hsla(var(--White), 1);
    padding: 8px 12px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.tooltip.visible {
    opacity: 1;
}

/* Ensure random member links are positioned relatively for tooltip context */
.randomMember a {
    position: relative;
    cursor: pointer;
}      


/* Mobile Navigation Styles */
@media screen and (max-width: 1366px) {
    /* Hide desktop navigation on mobile */
    .desktopNavContainer {
        display: none;
    }
    
    /* Show mobile navigation */
    .mobileNavContainer {
       display: block;
        position: relative; /* Changed from fixed to static */
        /* Remove top, left, right properties */
        z-index: 200;
    }
    
    /* Adjust primary grid for mobile */
    #primaryGrid {
        grid-template-columns: 1fr;
        padding: 0;
        top: 0; /* Changed from 110px to 0 since nav is now static height */
        margin-top: 0;
    }
    
    .featureContent {
        padding: 24px; /* Add top padding for mobile search button */
    }
    
    /* Mobile search toggle button */
    .mobileSearchToggle {
        width: 100%;
        padding: 12px 24px;
        background: hsla(var(--Black), 0.9);
        color: hsla(var(--White), 1);
        border: none;
        border-bottom: 1px solid hsla(var(--White), 0.5);
        font-family: "fractul-variable", sans-serif;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative; /* Changed from any absolute positioning */
    }
    
    .mobileSearchToggle:hover {
        background: hsla(var(--Red), 1);
    }
    
    /* Hamburger icon */
    .hamburgerIcon {
        display: flex;
        flex-direction: column;
        width: 20px;
        height: 16px;
        justify-content: space-between;
    }
    
    .hamburgerIcon span {
        width: 100%;
        height: 2px;
        background: hsla(var(--White), 1);
        transition: all 0.3s ease;
    }
    
    .mobileSearchToggle.active .hamburgerIcon span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .mobileSearchToggle.active .hamburgerIcon span:nth-child(2) {
        opacity: 0;
    }
    
    .mobileSearchToggle.active .hamburgerIcon span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    
    /* Mobile search overlay */
    .mobileSearchOverlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: hsla(var(--Black), 0.95);
        backdrop-filter: blur(8px);
        z-index: 300;
        display: none;
        overflow-y: auto;
    }
    
    .mobileSearchOverlay.active {
        display: block;
    }
    
    .mobileSearchContent {
        padding: 20px 0 0 0; /* Reduced top padding */
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    /* Close button */
    .mobileSearchClose {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: hsla(var(--Red), 1);
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        z-index: 400;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile alpha navigation - horizontal grid */
    .mobileAlphaNav {
        padding: 60px 8px 8px 8px;
        border-bottom: 1px solid hsla(var(--White), 0.5);
    }
    
    .mobileAlphaGrid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
        gap: 8px;
        max-width: 100%;
    }
    
    .mobileAlphaFilter {
        padding: 8px;
        text-align: center;
        color: hsla(var(--White), 1);
        text-decoration: none;
        font-family: "fractul-variable", sans-serif;
        font-weight: 600;
        border: 1px solid hsla(var(--White), 0.3);
        transition: all 0.3s ease;
    }
    
    .mobileAlphaFilter:hover,
    .mobileAlphaFilter.active {
        background: hsla(var(--Red), 1);
        border-color: hsla(var(--Red), 1);
        color: white;
    }
    
    /* Mobile search tools */
    .mobileSearchTools {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .mobileFilterContainer {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 1px;
        border-bottom: 1px solid hsla(var(--White), 0.5);
    }
    
    .mobileResultCount {
        padding: 12px 20px;
        color: hsla(var(--White), 1);
        font-family: "Poppins", sans-serif;
        font-size: 14px;
        border-bottom: 1px solid hsla(var(--White), 0.5);
    }
    
    /* Mobile result list */
    .mobileResultList {
        flex: 1;
        overflow-y: auto;
    }
    
    .mobileResultList .memberItem {
        display: flex;
        padding: 16px 20px;
        border-bottom: 1px solid hsla(var(--White), 0.3);
        color: white;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }
    
    .mobileResultList .memberItem:hover {
        background: hsla(var(--Red), 1);
    }
    
    .mobileResultList .memberItem img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        margin-right: 16px;
        border: 1px solid hsla(var(--White), 0.3);
    }
    
    .mobileResultList .nameAndCat {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .mobileResultList h2 {
        font-family: "fractul-variable", sans-serif;
        font-size: 16px;
        margin-bottom: 4px;
        text-transform: uppercase;
    }
    
    .mobileResultList p {
        font-family: "Poppins", sans-serif;
        font-size: 12px;
        margin: 2px 0;
        opacity: 0.8;
    }
}
/* Add this to hm_index_rev14.css */


@media screen and (max-width: 1366px) {
  body {
        margin: 0;
        padding-top: 0; /* Remove any top padding */
    }
    
    /* Let the nav determine its own height naturally */
    .navGrid {
        position: relative; /* Change to relative so content flows after it */
        width: 100%;
    }

    /* Make profile layout stack vertically on mobile */
    #hmProfile {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    /* Adjust profile summary for mobile */
    #hmProfile .profileSummary {
        border-right: none; /* Remove right border since we're stacking */
        border-bottom: 1px solid hsla(var(--White), .5);
    }
    
    /* Adjust profile details for mobile */
    #hmProfile .profileDetails {
        border-top: 1px solid hsla(var(--White), .5);
    }
    
    /* Make profile images responsive */
    #hmProfile .profileSummary img {
        max-width: 100%;
        height: auto;
    }
    
    /* Adjust photo gallery for mobile - make it single column */
    .profileDetails .photoGallery {
        column-count: 1; /* Single column on mobile */
        padding: 16px; /* Reduce padding on mobile */
    }
    
    /* Adjust artefact items for mobile - stack vertically */
    .artefactGallery .artefactItem {
        flex-direction: column;
        text-align: left;
    }
    
    .artefactItem img {
        width: 100%; /* Full width on mobile */
        max-width: 300px; /* Set a reasonable max width */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 16px; /* Add bottom margin instead */
    }
    
    /* Adjust typography for mobile */
    #hmProfile h1 {
        font-size: 1.75em;
        padding: 12px 16px 12px 16px; /* Reduce padding */
    }
    
    #hmProfile h2 {
        font-size: 21px;
        padding: 8px 16px 5px 0px; /* Reduce padding */
    }
    
    #hmProfile .detailItem {
        padding: 12px 16px 12px 16px; /* Reduce padding */
    }
    
    .profileDetails .highlights {
        padding: 16px; /* Reduce padding */
    }
    
    .profileDetails .story {
        padding: 16px; /* Reduce padding */
    }
    
    .profileDetails .media {
        margin: 16px; /* Reduce margin */
    }
    
    .artefactGallery {
        padding: 16px; /* Reduce padding */
    }
    
    /* Adjust intro feature for mobile */
    #introFeature {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 16px; /* Reduce gap */
    }
    
    /* Adjust intro message for mobile */
    .introMessage h1 {
        font-size: 32px; /* Smaller heading on mobile */
        margin: 16px 0px 16px 0px; /* Reduce margins */
    }
    
    /* Adjust random member section for mobile */
    .randomMember .memberImg {
        height: 300px; /* Smaller image on mobile */
        max-width: 300px;
    }
    
    .randomMember h3 {
        font-size: 1.5em; /* Larger than before but still mobile-appropriate */
    }
}

/* Desktop styles - hide mobile navigation */
@media screen and (min-width: 1367px) {
  .navGrid {
        position: fixed;
        top: 0;
    }
    
    #primaryGrid {
        top: 110px; /* Fixed offset for desktop */
    }
    .mobileNavContainer {
        display: none;
    }
    
    .desktopNavContainer {
        display: contents;
    }
}

/* Modal styling */
#notFoundModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1000;
}

#notFoundModal h1 {
    font-size: 2rem;
    color: #333;
}

#notFoundModal p {
    font-size: 1.2rem;
    margin: 10px 0 20px;
    color: #666;
}

#notFoundModal .button {
    display: inline-block;
    padding: 10px 20px;
    background: #0073e6;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
}

#notFoundModal .button:hover {
    background: #005bb5;
}