/* ============================================================
   pillnav.css — desktop pill-hover navigation, editorial cut.
   No glass bar, no container chrome: the links stay quiet text;
   a rose circle wipes up + label flips only on hover. Current
   page gets a small glowing petal-dot, not a filled pill.
   Mobile (≤880px) keeps the original stacked nav untouched.
   Requires js/pillnav.js (wraps labels + sizes the circle).
   ============================================================ */
/* safety net: if the flip-wraps ever exist below 881px, never show the duplicate */
.site-nav a.nav-link .pn-b { display: none; }
.site-nav a.nav-link .pn-circle { display: none; }

@media (min-width: 881px) {
  .site-nav a.nav-link .pn-b { display: inline-block; }
  .site-nav a.nav-link .pn-circle { display: block; }
  .site-nav ul { gap: 0.55rem; }
  .site-nav a.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
  }
  .site-nav a.nav-link::after { display: none; }   /* retire the old underline */
  .site-nav a.nav-link .pn-circle {
    position: absolute;
    left: 50%;
    bottom: 0;
    border-radius: 50%;
    background: var(--grad-pill, linear-gradient(150deg, #c4748b, #7a2840));
    transform: translateX(-50%) scale(0);
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    transition: transform 0.45s var(--ease-out-expo);
  }
  .site-nav a.nav-link:hover .pn-circle,
  .site-nav a.nav-link:focus-visible .pn-circle { transform: translateX(-50%) scale(1.2); }
  .site-nav a.nav-link .pn-stack {
    position: relative;
    display: inline-block;
    line-height: 1;
    z-index: 2;
  }
  .site-nav a.nav-link .pn-a {
    display: inline-block;
    transition: transform 0.45s var(--ease-out-expo);
  }
  .site-nav a.nav-link .pn-b {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    color: #fff;
    opacity: 0;
    transform: translateY(220%);
    transition: transform 0.45s var(--ease-out-expo), opacity 0.3s ease;
  }
  .site-nav a.nav-link:hover .pn-a,
  .site-nav a.nav-link:focus-visible .pn-a { transform: translateY(-220%); }
  .site-nav a.nav-link:hover .pn-b,
  .site-nav a.nav-link:focus-visible .pn-b { transform: translateY(0); opacity: 1; }

  /* current page: a little petal, not a pill */
  .site-nav a.nav-link.is-current { color: var(--fg, #fbeef2); }
  .site-nav a.nav-link.is-current::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--accent-bright, #e88aa0);
    box-shadow: 0 0 6px 1px rgba(232, 138, 160, 0.8);
    z-index: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav a.nav-link .pn-circle,
  .site-nav a.nav-link .pn-a,
  .site-nav a.nav-link .pn-b { transition: none; }
}