/* ---------- Concetto · shared top nav ----------
 * Used on all top-level concetto.dev pages. Designed to overlay full-screen
 * scenes without disrupting them: fixed at top, semi-transparent, ~36px tall.
 */
.concetto-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 36px;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  background: rgba(20, 12, 6, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200, 168, 120, 0.15);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.concetto-nav .brand {
  color: #c8a878;
  text-decoration: none;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: color .15s;
}
.concetto-nav .brand:hover { color: #f1e3c3; }
.concetto-nav .links {
  margin-left: auto;
  display: flex;
  gap: 1.75rem;
}
.concetto-nav .links a {
  color: #9b8a6e;
  text-decoration: none;
  transition: color .15s;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.concetto-nav .links a:hover {
  color: #f1e3c3;
}
.concetto-nav .links a.active {
  color: #c8a878;
  border-bottom-color: #c8a878;
}
/* Pages should give themselves at least this much top padding so nothing
 * sits underneath the nav. Full-screen scenes can leave it alone and just
 * let the nav float on top. */
:root { --concetto-nav-height: 36px; }
@media (max-width: 540px) {
  .concetto-nav { padding: 0 1rem; height: 34px; font-size: 10px; letter-spacing: 0.28em; }
  .concetto-nav .links { gap: 1.1rem; }
}