html {
  scroll-behavior: smooth;
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f7f1e7;
  font-family: 'Inter', sans-serif;
  padding-top: 100px;
}

.text-esoteric {
  color: #ec6e4c;
}

.btn-esoteric {
  background-color: #ec6e4c;
  color: white;
  border: none;
  padding: 0.6rem 1.4rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: .9rem;
}

.btn-esoteric:hover {
  background-color: #c45235;
  color: white;
}

.letter-spacing {
  letter-spacing: 2px;
  color: #6d588c;
}

.social-sidebar {
  background-color: transparent;
  border-right: 1px solid #ddd;
  padding-top: 2rem;
}

.social-sidebar a {
  color: #ec6e4c;
  font-size: 1.2rem;
}

.social-sidebar a:hover {
  color: #6d588c;
}

@@media (max-width: 768px) {
  .page-wrapper {
      flex-direction: column;
  }

  .social-sidebar {
      flex-direction: row;
      justify-content: center;
      border-right: none;
      border-bottom: 1px solid #ddd;
  }
}

.esoteric-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  border-bottom: 2px solid #ec6e4c;
}

.navbar-brand {
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: #ec6e4c;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-link {
  font-weight: 600;
  color: #6d588c;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #ec6e4c;
}

/* Hide mobile nav cleanly */
[x-cloak] { display: none; }

/* Optional: subtle divider for mobile nav */
@media (max-width: 992px) {
  .esoteric-nav nav a {
      padding: 0.5rem 0;
      border-bottom: 1px solid #eee;
  }
}

/* Branding */
.text-esoteric {
  color: #ec6e4c;
}

.navbar-brand {
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: #ec6e4c;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-link {
  font-weight: 600;
  color: #6d588c;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #ec6e4c;
}

/* Mobile menu styling */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
  display: none; /* hide by default */
}

/* Show class toggled by Alpine */
.mobile-menu.show {
  transform: translateX(0%);
  display: block;
}

.mobile-menu-inner {
  height: 100%;
  padding: 2rem;
  position: relative;
}

.btn-close-menu {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
  font-weight: bold;
  color: #6d588c;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
}

/* Mobile nav links */
.mobile-menu nav a {
  font-size: 1.25rem;
  color: #6d588c;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  transition: color 0.2s ease;
}

.mobile-menu nav a:hover {
  color: #ec6e4c;
}

.text-esoteric {
  color: #ec6e4c;
}

.bg-esoteric {
  background-color: #ec6e4c;
}

.letter-spacing {
  letter-spacing: 2px;
  color: #6d588c;
}

.btn-esoteric {
  background-color: #ec6e4c;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 50px;
}

.btn-esoteric:hover {
  background-color: #c45235;
}

.esoteric-footer {
  background-color: #f8f5f1;
  border-top: 2px solid #ec6e4c;
  font-size: 0.95rem;
}

.footer-link {
  color: #6d588c;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #ec6e4c;
  text-decoration: underline;
}