@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
  --em-cream: #f6eddd;
  --em-paper: #fff8ea;
  --em-forest: #405448;
  --em-rust: #be4b27;
  --em-ochre: #dca437;
  --em-navy: #0b2340;
}

body {
  background: var(--em-cream) !important;
  color: var(--em-forest) !important;
  font-family: 'Noto Sans', sans-serif !important;
}

h1, h2, h3, .font-extrabold, .font-bold {
  letter-spacing: normal;
}

h1, h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
}

#main-header.em-static-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 5rem;
  border-bottom: 1px solid rgb(64 84 72 / 15%) !important;
  background: rgb(246 237 221 / 95%) !important;
  color: var(--em-forest) !important;
  backdrop-filter: blur(12px);
}

.em-header-inner {
  width: min(100% - 2.5rem, 80rem);
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.em-wordmark {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--em-forest) !important;
  text-decoration: none;
}

.em-wordmark img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.em-wordmark span {
  font: 700 1.55rem/.82 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}

.em-desktop-nav {
  display: flex;
  align-items: center;
  gap: 1.65rem;
}

.em-desktop-nav a {
  color: var(--em-forest) !important;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.em-desktop-nav .nav-item:hover,
.em-desktop-nav .nav-item.text-white {
  color: var(--em-rust) !important;
  background: transparent !important;
}

#main-header .em-book-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: .65rem 1.1rem;
  border-radius: .55rem;
  background: var(--em-rust) !important;
  color: var(--em-paper) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.em-mobile-actions { display: none; align-items: center; gap: .55rem; }
.em-menu-button {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(64 84 72 / 45%);
  border-radius: .55rem;
  background: transparent;
  color: var(--em-forest);
}
.em-menu-button svg { width: 1.4rem; height: 1.4rem; }
.em-menu-button .hidden, .em-mobile-menu.hidden { display: none; }

.em-mobile-menu {
  min-height: calc(100vh - 5rem);
  padding: 2rem 1.5rem;
  background: var(--em-cream);
}
.em-mobile-menu nav { display: flex; flex-direction: column; }
.em-mobile-menu nav a {
  padding: 1rem 0;
  border-bottom: 1px solid rgb(64 84 72 / 20%);
  color: var(--em-forest) !important;
  font: 700 2rem/1 'Barlow Condensed', sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}
.em-mobile-menu p { margin-top: 2rem; color: rgb(64 84 72 / 65%); font-size: .8rem; }

.glass-card {
  border: 1px solid rgb(64 84 72 / 15%) !important;
  border-radius: 1.1rem !important;
  background: rgb(255 248 234 / 92%) !important;
  color: var(--em-forest) !important;
  box-shadow: 0 12px 30px rgb(64 84 72 / 8%) !important;
  backdrop-filter: none !important;
}

.glass-card:hover {
  border-color: rgb(190 75 39 / 35%) !important;
  box-shadow: 0 16px 36px rgb(64 84 72 / 12%) !important;
}

.animate-text { background: none !important; color: var(--em-rust) !important; }

body .text-white,
body .text-gray-100,
body .text-gray-200 { color: var(--em-forest) !important; }
body .text-gray-300,
body .text-gray-400,
body .text-gray-500 { color: rgb(64 84 72 / 72%) !important; }
body [class~="text-[#38bdf8]"],
body [class~="text-[#c084fc]"] { color: var(--em-rust) !important; }

body a[class*="from-[#38bdf8]"],
body button[class*="from-[#38bdf8]"] {
  background: var(--em-rust) !important;
  color: var(--em-paper) !important;
  box-shadow: none !important;
}

body a.bg-gradient-to-r,
body button.bg-gradient-to-r {
  background: var(--em-rust) !important;
  color: var(--em-paper) !important;
  box-shadow: none !important;
}

footer, footer .text-white, footer .text-gray-300, footer .text-gray-400 {
  color: var(--em-paper) !important;
}
footer { background: var(--em-navy) !important; }

@media (max-width: 767px) {
  .em-static-header { height: 5rem; }
  .em-header-inner { width: min(100% - 1.5rem, 80rem); }
  .em-desktop-nav { display: none; }
  .em-mobile-actions { display: flex; }
  .em-wordmark span { font-size: 1.25rem; }
  .em-wordmark img { width: 2.45rem; height: 2.45rem; }
}