/* Navigation: sticky pill bar; up to desktop width the links fold into a menu button. It tucks away above the
   screen while scrolling down and slides back on any scroll up (script.js toggles .is-tucked); keyboard focus
   inside always brings it back */

.site-nav { position: sticky; top: 10px; z-index: 20; padding: 0 12px; transition: transform .35s cubic-bezier(.34, 1.2, .64, 1); }
.site-nav.is-tucked:not(:focus-within) { transform: translateY(calc(-100% - 30px)); }
.nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1160px, 100%);
  min-height: 58px;
  margin: 10px auto 0;
  padding: 6px 8px 6px 18px;
  border: var(--line);
  border-radius: 99px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.25rem; text-decoration: none; }
.brand-mark { width: 26px; height: 26px; fill: var(--accent); stroke: var(--ink); stroke-width: 1.6px; transition: transform .4s ease; }
/* order: after the (now empty) <nav>, so the button sits at the right end, not mid-bar */
.nav-toggle { order: 1; display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--color-1); cursor: pointer; }
.nav-toggle span { width: 18px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .2s ease; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.nav-links { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 10px; border: var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); list-style: none; }
.nav-links.open { display: flex; }
.nav-links a { display: block; padding: 12px 16px; border-radius: 99px; font-size: 1.05rem; font-weight: 800; text-decoration: none; transition: background .2s ease; }
.nav-links a:active { background: var(--background); }
.nav-links .nav-cta { margin: 4px 0 0; border: var(--line); background: var(--color-1); box-shadow: 3px 3px 0 var(--ink); text-align: center; }
.nav-links .nav-cta:active { background: var(--color-3); }

/* Hover effects only where there's a mouse: on phones a tap would leave them stuck on */
@media (hover: hover) {
  .brand:hover .brand-mark { transform: rotate(90deg) scale(1.15); }
  .nav-links a:hover { background: var(--background); }
  .nav-links .nav-cta:hover { background: var(--color-3); }
}

@media (min-width: 681px) {
  .site-nav { top: 14px; padding: 0 16px; }
  .nav-pill { min-height: 66px; margin-top: 14px; padding: 8px 10px 8px 22px; }
  .brand { font-size: 1.45rem; }
}

/* Desktop: the links sit in the bar */
@media (min-width: 901px) {
  .nav-toggle { display: none; }
  .nav-links { position: static; inset: auto; display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .nav-links a { padding: 9px 16px; font-size: inherit; }
  .nav-links .nav-cta { margin: 0 0 0 6px; text-align: inherit; }
}