/* ------- Global layout ------- */
html, body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    background: #fafafa;
    color: #222;
  }
  .container   { display:flex; min-height:100vh; max-width:1100px; margin:0 auto; }
  
  /* ------- Sidebar ------- */
  .sidebar      { flex:0 0 260px; background:#fff; padding:2rem 1.5rem;
                  border-right:1px solid #ddd; box-shadow:0 0 8px rgba(0,0,0,.05); }
  .profile-pic  { width:180px; height:180px; border-radius:50%; object-fit:cover;
                  margin-bottom:1rem; box-shadow:0 2px 6px rgba(0,0,0,.1); }
  .sidebar h1   { font-size:1.4rem; margin:.2rem 0 .4rem; font-weight:700; }
  .tagline      { font-size:1rem; color:#555; margin-bottom:.8rem; }
  .contact-links{ list-style:none; margin:1rem 0 0; padding:0; }
  .contact-links li { margin:.4rem 0; }
  .contact-links a  { text-decoration:none; color:#0366d6; display:inline-flex;
                      align-items:center; gap:.5rem; }
  .contact-links i  { width:18px; text-align:center; }
  
  /* ------- Main content ------- */
  .main-content  { flex:1; padding:2.5rem 3.5rem; }
  section        { margin-bottom:2.2rem; }
  section h2     { text-transform:uppercase; letter-spacing:.05em; font-size:1.15rem;
                   margin:0 0 1rem; font-weight:600; color:#222;
                   border-bottom:2px solid #eee; padding-bottom:.3rem; }
  #publications ul { padding-left:1.2rem; margin:0; }
  #publications li { margin:.6rem 0; }
  .pub-note        { font-size:.9rem; color:#666; margin-top:.8rem; }
  
  /* ------- Responsive tweaks ------- */
  @media(max-width:800px) {
    .container   { flex-direction:column; }
    .sidebar     { flex:none; border-right:none; border-bottom:1px solid #ddd;
                   text-align:center; }
    .contact-links li { display:inline-block; margin:.5rem 1rem; }
  }

  /* Hobbies Section */
  #hobbies {
    margin-bottom: 2rem;
  }

  .hobbies-list {
    list-style: none;
    padding: 0;
  }

  .hobby-item {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .hobby-text {
    display: block;
  }

  .hobby-gallery {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    white-space: nowrap;
    /* margin-bottom: 5px; */ /* Removed to prevent gap issue */
  }

  /* .hobby-item:hover .hobby-gallery {
    display: flex;
    gap: 10px;
  } */

  .hobby-gallery img {
    width: 100px;
    height: 100px;
    object-fit: contain; /* Show full image without cropping */
    background-color: #f9f9f9; /* Add a background for non-square images */
    border-radius: 5px;
    border: 1px solid #eee;
    transition: transform 0.2s ease-in-out;
  }

  .hobby-gallery img:hover {
    transform: scale(2.5);
    object-fit: contain; /* Show full image without cropping */
    background: rgba(255, 255, 255, 0.8); /* Add a backdrop for non-square images */
    z-index: 20;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  }