/* ===== shared floating header — the homepage top bar, reused on every page =====
   Markup:
   <header class="topnav"><div class="tn-wrap">
     <a class="idmark" href="index.html"><img class="avatar" src="logos/avatar.jpg" alt=""><span class="nm">Nikith Vijay</span></a>
     <nav class="pillnav">…</nav>
     <div class="top-actions">…</div>
   </div></header>
   Self-contained: no dependency on page CSS variables. */

.topnav {
  padding: 14px 0; position: sticky; top: 0; z-index: 40;
  background: transparent; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
  line-height: 1.65;
}
.topnav .tn-wrap {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.topnav .tn-wrap > * { pointer-events: auto; }
.topnav .idmark {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: #20241F;
  background: #FFFDF8; padding: 4px 16px 4px 4px; border-radius: 999px;
  box-shadow: 0 3px 12px rgba(32,36,31,0.08);
  transform: rotate(-1deg); transition: transform 0.2s ease;
}
.topnav .idmark:hover { transform: rotate(0deg); }
.topnav .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(32,36,31,0.18); display: block; }
.topnav .idmark .nm { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.topnav .pillnav { display: flex; gap: 4px; background: #FFFDF8; border-radius: 999px; padding: 5px; box-shadow: 0 3px 12px rgba(32,36,31,0.08); }
.topnav .pillnav a {
  font-size: 14px; font-weight: 600; text-decoration: none; color: #5C665F;
  padding: 8px 18px; border-radius: 999px; transition: color 0.2s ease, background 0.2s ease;
}
.topnav .pillnav a:hover { color: #1E5A4E; }
.topnav .pillnav a.active { background: #1E5A4E; color: #FAF6EE; }
.topnav .top-actions { display: flex; gap: 12px; align-items: center; }
.topnav .btn-dark {
  --off: #FFE175;
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, #2C2C22 0%, #17170F 55%); color: #fff;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none;
  padding: 10px 18px 10px 11px; border-radius: 999px; border: 1.5px solid rgba(23,23,15,0.9);
  transform: rotate(-1deg); transition: transform 0.18s cubic-bezier(.2,.8,.25,1), box-shadow 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 3px 3px 0 var(--off), 3px 3px 0 1.5px rgba(23,23,15,0.9), 0 8px 16px rgba(23,23,15,0.16);
  white-space: nowrap;
}
.topnav .btn-dark:hover, .topnav .btn-dark:focus-visible {
  transform: rotate(0deg) translate(1px, 1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 2px 2px 0 var(--off), 2px 2px 0 1.5px rgba(23,23,15,0.9), 0 5px 12px rgba(23,23,15,0.16);
}
.topnav .btn-dark:active {
  transform: translate(3px, 3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 var(--off), 0 0 0 1.5px rgba(23,23,15,0.9), 0 2px 6px rgba(23,23,15,0.14);
}
.topnav .btn-dark .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #FFE175; color: #6B4E12; box-shadow: inset 0 -1px 0 rgba(107,78,18,0.25);
}
.topnav .btn-dark .ic svg { display: block; }
.topnav .btn-dark.sq { padding: 10px 11px; border-radius: 14px; transform: rotate(1.5deg); }
.topnav .btn-dark.sq svg { display: block; }
.topnav .btn-dark.li { --off: #BFE0F8; }
.topnav .btn-dark.li:hover, .topnav .btn-dark.li:focus-visible { transform: rotate(0deg) translate(1px, 1px); }
.topnav a:focus-visible { outline: 3px solid #2F7263; outline-offset: 3px; border-radius: 6px; }
@media (max-width: 820px) { .topnav .pillnav { display: none; } }
@media (max-width: 480px) {
  .topnav { padding: 12px 0; }
  .topnav .idmark { padding: 3px; gap: 0; }
  .topnav .idmark .nm { display: none; }
  .topnav .btn-dark { padding: 9px 15px 9px 9px; font-size: 13px; }
  .topnav .btn-dark.sq { padding: 9px 10px; }
}
@media print { .topnav { display: none !important; } }