/* A small site-wide index. Native <details> keeps the menu usable without JS;
   the fixed position means every page has the same way back out. */

.site-menu {
  position: fixed;
  top: clamp(0.75rem, 1.8vw, 1.25rem);
  right: clamp(0.75rem, 1.8vw, 1.25rem);
  z-index: 40;
  line-height: 1.35;
}

.site-menu__disclosure {
  position: relative;
}

.site-menu__toggle {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  list-style: none;
  border: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
  backdrop-filter: blur(0.5rem);
}

.site-menu__toggle::-webkit-details-marker {
  display: none;
}

.site-menu__toggle:hover,
.site-menu__toggle:focus-visible,
.site-menu__disclosure[open] .site-menu__toggle {
  border-color: var(--accent);
  background: var(--ground);
}

.site-menu__icon,
.site-menu__icon::before,
.site-menu__icon::after {
  width: 1rem;
  height: 1px;
  background: currentColor;
  transition:
    transform 0.22s var(--ease-out),
    background-color 0.15s var(--ease);
}

.site-menu__icon {
  position: relative;
  display: block;
}

.site-menu__icon::before,
.site-menu__icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.site-menu__icon::before {
  top: -0.32rem;
}

.site-menu__icon::after {
  top: 0.32rem;
}

.site-menu__disclosure[open] .site-menu__icon {
  background: transparent;
}

.site-menu__disclosure[open] .site-menu__icon::before {
  transform: translateY(0.32rem) rotate(45deg);
}

.site-menu__disclosure[open] .site-menu__icon::after {
  transform: translateY(-0.32rem) rotate(-45deg);
}

.site-menu__panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  width: min(17rem, calc(100vw - 1.5rem));
  border: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--ground) 96%, transparent);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(0.8rem);
}

/* Keep the visual breathing room below the toggle inside the hover target, so
   the menu remains open while the pointer travels down to the panel. */
.site-menu__panel::before {
  content: '';
  position: absolute;
  right: -1px;
  bottom: 100%;
  left: -1px;
  height: 0.55rem;
}

.site-menu__heading {
  padding: 0.75rem 0.9rem;
  color: var(--ink-faint);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.site-menu__list {
  border-top: 1px solid var(--rule);
}

.site-menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.78rem 0.9rem;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition:
    color 0.2s var(--ease),
    background-color 0.2s var(--ease),
    padding-left 0.2s var(--ease-out);
}

.site-menu__list li:last-child .site-menu__link {
  border-bottom: 0;
}

.site-menu__link span:last-child {
  color: var(--ink-ghost);
  font-size: var(--step--2);
}

.site-menu__link:hover,
.site-menu__link:focus-visible {
  padding-left: 1.1rem;
  color: var(--accent);
  background: var(--ground-raised-2);
}

.site-menu__link[aria-current='page'] {
  color: var(--ink);
}

.site-menu__link[aria-current='page']::before {
  content: '';
  width: 0.38rem;
  height: 0.38rem;
  flex: 0 0 auto;
  margin-right: -0.25rem;
  border-radius: 50%;
  background: var(--accent);
}

/* The landing grid is the primary navigation. Once it has scrolled above the
   viewport, this narrow dock rises from the lower edge to keep the same five
   routes within reach. The two soft gradient edges do the border work without
   turning the bar into a hard glass pill. */
.floating-nav {
  position: fixed;
  left: 50%;
  bottom: max(0.6rem, env(safe-area-inset-bottom));
  z-index: 35;
  width: min(46rem, calc(100vw - 1rem));
  padding: 1px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(var(--ink-rgb), 0.05),
    rgba(var(--ink-rgb), 0.25) 18%,
    rgba(var(--accent-rgb), 0.3) 50%,
    rgba(var(--ink-rgb), 0.25) 82%,
    rgba(var(--ink-rgb), 0.05)
  );
  box-shadow:
    0 0 0.9rem rgba(var(--ink-rgb), 0.055),
    0 0 1.8rem rgba(var(--accent-rgb), 0.08);
  visibility: hidden;
  opacity: 0;
  filter: blur(0.45rem);
  pointer-events: none;
  transform: translate(-50%, calc(100% + 1.6rem));
  transition:
    transform 0.42s var(--ease-out),
    opacity 0.32s var(--ease),
    filter 0.32s var(--ease),
    visibility 0s linear 0.42s;
}

.floating-nav::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(0.85rem);
  backdrop-filter: blur(0.85rem);
}

.floating-nav[data-ready][data-visible] {
  visibility: visible;
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.floating-nav__list {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.floating-nav__list::-webkit-scrollbar {
  display: none;
}

.floating-nav__list li {
  display: flex;
  flex: 1 0 auto;
  align-items: stretch;
}

.floating-nav__list .floating-nav__home-item {
  flex-grow: 0;
}

.floating-nav__list li + li::before {
  content: '';
  align-self: center;
  width: 1px;
  height: 0.7rem;
  background: var(--rule);
}

.floating-nav__link {
  display: grid;
  flex: 1;
  place-items: center;
  padding: 0.42rem clamp(0.62rem, 1.5vw, 1rem);
  color: rgba(var(--ink-rgb), 0.72);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.055em;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 0 0.75rem rgba(var(--accent-rgb), 0.28);
  transition:
    color 0.2s var(--ease),
    text-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.floating-nav__link:hover,
.floating-nav__link:focus-visible {
  color: var(--ink);
  background: rgba(var(--accent-rgb), 0.035);
  text-shadow:
    0 0 0.55rem rgba(var(--accent-rgb), 0.88),
    0 0 1.25rem rgba(var(--accent-rgb), 0.42);
}

.floating-nav__link:focus-visible {
  outline-offset: -2px;
}

.floating-nav__home {
  min-width: 2.15rem;
  padding-inline: 0.7rem;
}

.floating-nav__home-icon {
  width: 0.82rem;
  height: 0.82rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

@media (max-width: 40rem) {
  .floating-nav {
    bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.5rem));
    width: min(24rem, calc(100vw - 1rem));
    border-radius: 1rem;
  }

  .floating-nav__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
  }

  .floating-nav__list li + li::before {
    content: none;
  }

  .floating-nav__list li:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--rule);
  }

  .floating-nav__list li:nth-child(n + 4) {
    border-top: 1px solid var(--rule);
  }

  .floating-nav__link {
    padding-inline: 0.35rem;
  }
}

@media print {
  .site-menu,
  .floating-nav {
    display: none;
  }
}