.nav { position: relative; display: inline-block; margin-bottom: 10px; z-index: 30; }
.nav-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; font: 600 15px system-ui, sans-serif; cursor: pointer; padding: 0 0 6px; list-style: none; user-select: none; }
.nav-brand::-webkit-details-marker { display: none; }
.nav-menu { position: absolute; top: 100%; left: -8px; min-width: 170px; padding: 4px 0; background: #fff; border: 1px solid #ddd;
            border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.nav-menu a { display: block; padding: 10px 14px; color: #333; text-decoration: none; font: 14px system-ui, sans-serif; }
.nav-menu a:hover { background: #f3f4f6; }
.nav-menu a.nav-current { font-weight: 600; color: #000; }
.nav-mascot { display: block; height: 40px; width: 58px; margin-bottom: -3px; position: relative; z-index: -1; pointer-events: none; }  /* behind the word, so it peeks from behind it */