/* Site header. Self-contained so it can also sit on the legacy iWeb About page. */
.top {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px;
  background: rgba(17, 17, 17, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #222;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #e8e8e8;
  text-align: left;
}
.top, .top * { box-sizing: border-box; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.brand img { display: block; width: 28px; height: 28px; }
.top nav { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a { text-decoration: none; color: #9a9a9a; white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { color: #fff; border-bottom-color: #fff; }

@media (max-width: 700px) {
  .top { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; }
  .top nav { gap: 16px; width: 100%; }
}