.fixed-header { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    display:flex; 
    align-items:flex-start; 
   padding: clamp(1px, 2vw, 20px); 
   gap: clamp(5px, 4vw, 40px); 
       } 
  .logo-diagonal img {
 max-width: clamp(5px, 18.5vw, 400px); /* min, fluid, max */
  height: auto;
  display: block;
  position: relative;
  top: -1.5vh; /* gentler offset */
  left: -1vw;
  
}

/* Portrait orientation adjustment */
@media screen and (orientation: portrait) {
  .logo-diagonal img {
    top: -5vh; /* less offset so it stays visible */
    width: 40vw; /* optional: make logo wider in portrait */
  }
} 
                  
   nav { 
    position: fixed; 
    top: 20vh; /* 15% of viewport height instead of 140px */ 
    left: -20vw; /* hidden off-screen: 20% of viewport width */ 
    width: 20vw; /* sidebar always 20% of screen width */ 
    display: flex; 
    flex-direction: column; 
    gap: 0.6vh; /* spacing scales with screen height */ 
    padding-left: 1.8vw; /* padding scales with screen width */ 
    transition: left 0.3s;
    
     } 
     
  .fixed-header:hover nav, nav:hover { 
   left: 1.7vw;
   visibility: visible;                      
     } 
  nav a { 
    display: flex; 
    align-items: center; 
    font-weight: 300; 
    font-size: 1vw; 
    color: #000; 
    padding: 1vh 0; 
    gap: 0.3vw; /* cleaner spacing between icon and label */
  
      } 
 .circle { 
 display: inline-flex; 
 align-items: center; 
 justify-content: center; 
 width: 6.2vh; /* scales with viewport width */ 
 height: 6.2vh; /* scales with viewport height */
 border-radius: 50%; 
background-color: rgba(150, 150, 150, 0.6);
 color: #333; 
 flex-shrink: 0; 
 } 
 
.circle i { 
font-size: 1.3vw; 
line-height: 2; 
text-align: center; 
color: rgba(255, 255, 255, 2);
}
@media screen and (orientation: portrait) {
  .circle i {
    font-size: 2.5vw; /* larger in portrait */
  }
}
.circle:hover { 
background-color: #A00;
}
 
 /* hidden by default */ 
nav a span { 
visibility: hidden; 
opacity: 0; 
transition: opacity 0.3s ease; 
margin-left: 8px; 
} 
/* Reveal labels when hovering over the whole fixed-header (logo OR nav) */ 

.fixed-header:hover nav a span:first-child{ 
visibility: visible; 
opacity: 1;
}
 
  /* show all labels when nav is hovered */ 
  nav:hover a span:first-child{ 
  visibility: visible; 
  opacity: 1; 
  }
  
 /* Hide all text spans by default */ 
 nav a span:last-child { 
 visibility: hidden; 
 opacity: 0; 
 transition: opacity 0.3s ease; 
 } 
 /* Reveal only the 2nd link’s text (Awards) on hover */ 
 
.circle:hover + span { 
visibility: visible; 
opacity: 1; }