/* ─────────────────────────────────────────────────────────────
   SeedTree — cross-page navigation strip
   Auto-injected at the bottom of every destination page (above
   the tagline footer) so visitors can move between the five
   paths + the Landscape + the feed without bouncing back to the
   Heart Space.
   ───────────────────────────────────────────────────────────── */

.site-nav {
  margin: 28px 0 8px;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(201, 169, 97, 0.18);
}
.site-nav-row {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.site-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font: 0.82rem var(--font-display);
  font-style: italic;
  color: rgba(236, 231, 216, 0.65);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color .2s var(--ease-organic),
              background .2s,
              border-color .2s;
}
.site-nav-link:hover {
  color: var(--cream);
  background: rgba(7, 20, 14, 0.5);
  border-color: rgba(201, 169, 97, 0.28);
}
.site-nav-link.is-current {
  color: var(--gold-light);
  background: rgba(201, 169, 97, 0.12);
  border-color: rgba(201, 169, 97, 0.35);
  cursor: default;
}

.site-nav-glyph {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--gold-light);
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1;
}
.site-nav-link.is-current .site-nav-glyph { color: var(--gold); opacity: 1; }
.site-nav-label { white-space: nowrap; }

@media (max-width: 540px) {
  .site-nav { margin-top: 24px; padding-top: 12px; }
  .site-nav-link { padding: 5px 10px; font-size: 0.78rem; }
  .site-nav-label { display: none; }   /* glyph-only on narrow screens */
  .site-nav-glyph { font-size: 1.05rem; }
}

/* Page-bg pages with a low-opacity panel can crowd the nav into the
   text-shadow zone. Bump up legibility there. */
.page--art .site-nav-link { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }