/* The header of the home and the lessons, for the pages built on app.css (the partners page): the same logo, the whole
   menu and the same buttons on every door of the site, so a visitor can always go back (Eliana, 31/10). Its colors
   and type are its own, so the rest of the page is untouched. */
.sw-nav {
  --bg: #ffffff; --ink: #111012; --soft: #f7f3f4; --g: clamp(16px, 3vw, 44px); --ease: cubic-bezier(.2, .8, .2, 1);
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: 68px; padding-inline: var(--g); background: var(--bg); color: var(--ink);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.4;
}
:root[data-theme='dark'] .sw-nav { --bg: #0f0e10; --ink: #f7f4f5; --soft: #19171a; }
.sw-nav a { color: inherit; text-decoration: none; }
.sw-nav .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sw-brand { justify-self: start; font-weight: 700; font-size: 17px; letter-spacing: -.035em; white-space: nowrap; }
.sw-links { display: flex; gap: clamp(14px, 2.2vw, 34px); font-size: 15.5px; font-weight: 500; }
.sw-links a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px; transition: background-size .35s var(--ease); padding-bottom: 2px; }
.sw-links a:hover, .sw-links a[aria-current='page'] { background-size: 100% 1.5px; }
.sw-nav-r { justify-self: end; display: flex; align-items: center; gap: 6px; }
.sw-nav .sw-lang, .sw-nav .icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 600 13.5px/1 inherit; box-shadow: none; cursor: pointer; transition: background .2s; }
.sw-nav .sw-lang:hover, .sw-nav .icon-btn:hover { background: var(--soft); }
.sw-nav .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 40px; margin-left: 8px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--ink); color: var(--bg); box-shadow: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; transition: translate .2s var(--ease); }
.sw-nav .btn:hover { translate: 0 -2px; }
.sw-nav .btn .go { transition: translate .3s var(--ease); }
.sw-nav .btn:hover .go { translate: 4px 0; }
.sw-nav .logo { position: relative; display: inline-block; height: 50px; aspect-ratio: 681.1 / 568.9; flex: none; vertical-align: middle; }
.sw-nav .logo .lg-art { position: absolute; inset: 0; background: currentColor; -webkit-mask: url(/img/brand/logo-plain.svg) center / contain no-repeat; mask: url(/img/brand/logo-plain.svg) center / contain no-repeat; }
.sw-nav .logo .lg-eye { position: absolute; top: 24.5%; left: 33%; width: 4.7%; height: 5.6%; border-radius: 50%; background: currentColor; animation: logo-look 5s ease-in-out infinite; }
.sw-nav .logo .lg-eye + .lg-eye { left: 57.72%; }
@keyframes logo-look { 0%, 20% { transform: translateX(0); } 32%, 70% { transform: translateX(72%); } 82%, 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .sw-nav .logo .lg-eye { animation: none; } }
/* the whole menu fits: closer links on narrower screens, and on a phone the menu steps aside like on the home */
@media (max-width: 1260px) { .sw-links { gap: 14px; font-size: 14.5px; } }
@media (max-width: 1100px) { .sw-links { gap: 12px; font-size: 14px; } }
@media (max-width: 899px) { .sw-links { display: none; } }
@media (max-width: 430px) {
  .sw-nav-r [data-act='theme'], .sw-nav .btn .ic { display: none; }
  .sw-nav .btn { padding: 0 13px; font-size: 14px; margin-left: 2px; }
  .sw-nav { gap: 8px; }
}
@media (pointer: coarse) { .sw-nav .btn, .sw-nav .sw-lang, .sw-nav .icon-btn { min-height: 44px; } .sw-nav .sw-lang, .sw-nav .icon-btn { min-width: 44px; } }