:root {
  --jbje-black: #080a08;
  --jbje-espresso: #14100b;
  --jbje-forest: #1d2a1f;
  --jbje-olive: #4d5d37;
  --jbje-brass: #c2a06a;
  --jbje-gold: #d6b36a;
  --jbje-parchment: #f2ece0;
}

body.jbje-locked { overflow: hidden; }

.jbje-root,
.jbje-root *,
.jbje-root *::before,
.jbje-root *::after { box-sizing: border-box; }

.jbje-menu-entry { display: flex; align-items: center; }
.jbje-entry-link {
  min-height: 38px;
  border: 1px solid rgba(194, 160, 106, .58);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
  padding: 0 13px;
}
.jbje-entry-link:hover,
.jbje-entry-link:focus-visible { border-color: var(--jbje-brass); color: var(--jbje-brass); }

.jbje-home-entry {
  min-height: 48px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0 20px;
}

.jbje-experience,
.jbje-guide {
  position: fixed;
  z-index: 100000;
  color: var(--jbje-parchment);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.jbje-experience[hidden],
.jbje-guide[hidden] { display: none !important; }

.jbje-experience {
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  border: 1px solid rgba(194, 160, 106, .42);
  background: var(--jbje-black);
  padding: clamp(68px, 8vh, 110px) clamp(20px, 5vw, 78px) 42px;
}
.jbje-experience::before {
  position: fixed;
  inset: 18px;
  border: 1px solid rgba(194, 160, 106, .38);
  border-radius: 4px;
  content: "";
  pointer-events: none;
}
.jbje-experience__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--jbje-black);
  background-position: center 44%;
  background-repeat: no-repeat;
  background-size: min(100vw, 1500px) auto;
  opacity: 0;
  transition: opacity .55s ease;
}
.jbje-experience__scene.is-loaded { opacity: .96; }
.jbje-experience__scene::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,10,8,.78) 0%, rgba(8,10,8,.08) 28%, rgba(8,10,8,.12) 70%, rgba(8,10,8,.88) 100%),
    radial-gradient(circle at center, transparent 0 34%, rgba(8,10,8,.52) 78%, rgba(8,10,8,.88) 100%);
  content: "";
}
.jbje-mist {
  position: absolute;
  right: -15%;
  bottom: -4%;
  left: -15%;
  height: 24%;
  background: radial-gradient(ellipse at center, rgba(225,217,195,.13), transparent 62%);
  filter: blur(20px);
  opacity: .65;
  animation: jbje-mist 18s ease-in-out infinite alternate;
}
.jbje-mist--two { bottom: 4%; animation-duration: 23s; animation-direction: alternate-reverse; opacity: .34; }

.jbje-experience__content {
  position: relative;
  z-index: 2;
  width: min(100%, 1060px);
  text-align: center;
}
.jbje-dragonfly {
  display: block;
  width: clamp(84px, 9vw, 145px);
  height: auto;
  margin: 0 auto 14px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
  animation: jbje-dragonfly 7s ease-in-out infinite;
}
.jbje-eyebrow {
  margin: 0 0 12px;
  color: var(--jbje-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.jbje-experience h2,
.jbje-guide h2 {
  margin: 0;
  color: var(--jbje-parchment);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(54px, 8.2vw, 116px);
  font-weight: 500;
  line-height: .94;
  letter-spacing: 0;
}
.jbje-experience__content > p:not(.jbje-eyebrow) {
  max-width: 720px;
  margin: 24px auto 30px;
  color: rgba(242,236,224,.82);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.65;
}
.jbje-primary-routes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.jbje-primary-routes a,
.jbje-guide__response a,
.jbje-guide-prompt button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jbje-brass);
  border-radius: 3px;
  background: rgba(29,42,31,.78);
  color: var(--jbje-parchment);
  font-weight: 700;
  letter-spacing: 0;
  padding: 11px 17px;
  text-decoration: none;
}
.jbje-primary-routes a:hover,
.jbje-primary-routes a:focus-visible,
.jbje-guide__response a:hover,
.jbje-guide__response a:focus-visible,
.jbje-guide-prompt button:hover,
.jbje-guide-prompt button:focus-visible { background: var(--jbje-brass); color: var(--jbje-black); }
.jbje-secondary-routes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin-top: 24px;
}
.jbje-secondary-routes a { color: rgba(242,236,224,.82); padding: 0 15px; text-decoration: none; }
.jbje-secondary-routes a + a { border-left: 1px solid rgba(194,160,106,.45); }
.jbje-secondary-routes a:hover,
.jbje-secondary-routes a:focus-visible { color: var(--jbje-brass); text-decoration: underline; text-underline-offset: 4px; }
.jbje-guide-prompt {
  display: flex;
  max-width: 650px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 26px auto 0;
  border-top: 1px solid rgba(194,160,106,.24);
  padding-top: 18px;
}
.jbje-guide-prompt span { color: rgba(242,236,224,.72); }
.jbje-guide-prompt button { min-height: 42px; background: transparent; cursor: pointer; padding-block: 7px; }

.jbje-close {
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 30px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(194,160,106,.7);
  border-radius: 50%;
  background: rgba(8,10,8,.7);
  color: var(--jbje-parchment);
  cursor: pointer;
  font: 30px/1 Georgia, serif;
}
.jbje-close:hover,
.jbje-close:focus-visible { background: var(--jbje-brass); color: var(--jbje-black); }

.jbje-guide-launcher {
  position: fixed;
  z-index: 99990;
  right: 22px;
  bottom: 22px;
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(194,160,106,.72);
  border-radius: 30px;
  background: rgba(13,18,13,.96);
  box-shadow: 0 14px 38px rgba(0,0,0,.38);
  color: var(--jbje-parchment);
  cursor: pointer;
  font: 700 14px/1 "Hanken Grotesk", system-ui, sans-serif;
  letter-spacing: 0;
  padding: 5px 18px 5px 5px;
}
.jbje-guide-launcher img { width: 48px; height: 48px; border: 1px solid rgba(194,160,106,.55); border-radius: 50%; object-fit: cover; object-position: center 22%; }
.jbje-guide-launcher,
.jbje-guide-launcher span,
.jbje-guide-launcher img { transition: width .22s ease, padding .22s ease, gap .22s ease, opacity .16s ease, transform .22s ease; }
.jbje-guide-launcher.is-compact {
  width: 58px;
  min-width: 58px;
  height: 58px;
  min-height: 58px;
  justify-content: center;
  gap: 0;
  padding: 4px;
}
.jbje-guide-launcher.is-compact span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.jbje-guide-launcher.is-compact img { width: 48px; height: 48px; }
.jbje-guide-launcher:hover,
.jbje-guide-launcher:focus-visible { border-color: var(--jbje-gold); box-shadow: 0 0 0 3px rgba(194,160,106,.15), 0 14px 38px rgba(0,0,0,.42); }

.jbje-guide {
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(94vw, 680px);
  max-height: min(88vh, 760px);
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: auto;
  border: 1px solid rgba(194,160,106,.58);
  border-radius: 4px;
  background: linear-gradient(145deg, #0b0d0b 0%, #151810 62%, #11100c 100%);
  box-shadow: 0 28px 80px rgba(0,0,0,.68);
}
.jbje-guide__visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(194,160,106,.2);
  background: radial-gradient(circle at 52% 42%, rgba(194,160,106,.2), transparent 58%), #0b0d0b;
}
.jbje-monkey-mouth {
  position: absolute;
  z-index: 4;
  top: 24%;
  left: 61%;
  width: 13px;
  height: 4px;
  border-radius: 50%;
  background: #2a120e;
  box-shadow: inset 0 1px rgba(233,170,143,.34), 0 0 0 1px rgba(35,17,12,.35);
  opacity: 0;
  transform: rotate(-3deg) scaleY(.45);
  transform-origin: center;
}
.jbje-guide__visual.is-thinking .jbje-monkey--base { animation: jbje-thinking 1.4s ease-in-out infinite; }
.jbje-guide__visual.is-speaking .jbje-monkey--blink,
.jbje-guide__visual.is-speaking .jbje-monkey--turn { animation-play-state: paused; opacity: 0; }
.jbje-guide__visual.is-speaking .jbje-monkey-mouth { opacity: 1; animation: jbje-mouth .28s steps(2, end) infinite; }
.jbje-monkey { position: absolute; right: -8%; bottom: 0; width: 118%; height: 92%; object-fit: contain; object-position: bottom center; }
.jbje-monkey--blink { opacity: 0; animation: jbje-blink 11s linear infinite; }
.jbje-monkey--turn { opacity: 0; animation: jbje-turn 17s ease-in-out infinite; }
.jbje-guide__content { min-width: 0; overflow-y: auto; padding: 42px 34px 30px; }
.jbje-guide h2 { font-size: clamp(42px, 6vw, 68px); }
.jbje-guide h3 { margin: 18px 0 8px; color: var(--jbje-parchment); font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; font-weight: 500; letter-spacing: 0; }
.jbje-guide__content > p:not(.jbje-eyebrow),
.jbje-guide__response > p { color: rgba(242,236,224,.72); line-height: 1.55; }
.jbje-guide__choices { display: grid; gap: 8px; margin-top: 20px; }
.jbje-guide__choices[hidden],
.jbje-guide__response[hidden],
.jbje-chat-panel[hidden] { display: none !important; }
.jbje-guide__choices button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(194,160,106,.32);
  border-radius: 3px;
  background: rgba(29,42,31,.46);
  color: var(--jbje-parchment);
  cursor: pointer;
  font: 600 14px/1.2 "Hanken Grotesk", system-ui, sans-serif;
  letter-spacing: 0;
  padding: 10px 14px;
  text-align: left;
}
.jbje-guide__choices button:hover,
.jbje-guide__choices button:focus-visible { border-color: var(--jbje-brass); background: rgba(77,93,55,.48); }
.jbje-guide__choices button span { color: var(--jbje-brass); font-size: 24px; }
.jbje-guide__response { margin-top: 22px; border-top: 1px solid rgba(194,160,106,.28); padding-top: 20px; }
.jbje-guide__response > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jbje-guide__response a { min-height: 44px; flex: 1 1 140px; padding-block: 8px; }
.jbje-back { margin-top: 18px; border: 0; background: transparent; color: var(--jbje-brass); cursor: pointer; font: inherit; padding: 5px 0; text-decoration: underline; text-underline-offset: 4px; }

.jbje-chat-toggle {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  border: 1px solid rgba(194,160,106,.58);
  border-radius: 3px;
  background: transparent;
  color: var(--jbje-parchment);
  cursor: pointer;
  font: 700 14px/1.2 "Hanken Grotesk", system-ui, sans-serif;
  padding: 10px 14px;
  text-align: left;
}
.jbje-chat-toggle:hover,
.jbje-chat-toggle:focus-visible,
.jbje-chat-toggle[aria-expanded="true"] { border-color: var(--jbje-brass); background: rgba(194,160,106,.1); }
.jbje-chat-toggle span { color: var(--jbje-brass); font-size: 22px; font-weight: 400; }
.jbje-chat-panel { margin-top: 10px; border-top: 1px solid rgba(194,160,106,.2); padding-top: 4px; }

.jbje-guide__voice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 10px;
  border: 1px solid rgba(194,160,106,.25);
  border-radius: 3px;
  background: rgba(8,10,8,.42);
  padding: 8px 10px;
  font-size: 13px;
}
.jbje-guide__voice label { display: flex; align-items: center; gap: 7px; color: var(--jbje-parchment); cursor: pointer; }
.jbje-guide__voice label span { color: var(--jbje-brass); font-weight: 700; }
.jbje-guide__voice button { border: 0; background: transparent; color: var(--jbje-brass); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.jbje-guide__voice button:disabled { cursor: default; opacity: .38; }
.jbje-guide__transcript {
  display: grid;
  max-height: 220px;
  gap: 9px;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 4px;
  scrollbar-color: rgba(194,160,106,.5) transparent;
}
.jbje-message { max-width: 92%; border: 1px solid rgba(194,160,106,.22); border-radius: 9px; padding: 9px 11px; }
.jbje-message p { margin: 0; color: rgba(242,236,224,.88); font-size: 14px; line-height: 1.45; }
.jbje-message--guide { justify-self: start; background: rgba(29,42,31,.58); }
.jbje-message--visitor { justify-self: end; background: rgba(194,160,106,.14); }
.jbje-message__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jbje-message__links a { border-bottom: 1px solid var(--jbje-brass); color: var(--jbje-parchment); font-size: 12px; font-weight: 700; text-decoration: none; }
.jbje-guide__form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 12px; }
.jbje-guide__form textarea {
  min-width: 0;
  min-height: 48px;
  resize: vertical;
  border: 1px solid rgba(194,160,106,.42);
  border-radius: 3px;
  outline: 0;
  background: #090c09;
  color: var(--jbje-parchment);
  font: 14px/1.4 "Hanken Grotesk", system-ui, sans-serif;
  padding: 10px;
}
.jbje-guide__form textarea:focus { border-color: var(--jbje-gold); box-shadow: 0 0 0 2px rgba(194,160,106,.14); }
.jbje-guide__form button { min-width: 68px; border: 1px solid var(--jbje-brass); border-radius: 3px; background: var(--jbje-forest); color: var(--jbje-parchment); cursor: pointer; font: 700 14px/1 "Hanken Grotesk", system-ui, sans-serif; padding: 8px 12px; }
.jbje-guide__form button:hover,
.jbje-guide__form button:focus-visible { background: var(--jbje-brass); color: var(--jbje-black); }
.jbje-guide__form button:disabled { cursor: wait; opacity: .55; }
.jbje-guide__status { min-height: 18px; margin: 6px 0 0 !important; color: var(--jbje-brass) !important; font-size: 12px; }
.jbje-guide__choices { grid-template-columns: repeat(2, minmax(0,1fr)); }
.screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px,1px,1px,1px) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

@keyframes jbje-mist { from { transform: translate3d(-3%,0,0) scale(1); } to { transform: translate3d(3%,-4%,0) scale(1.08); } }
@keyframes jbje-dragonfly { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes jbje-blink { 0%, 45%, 48%, 100% { opacity: 0; } 46%, 47% { opacity: 1; } }
@keyframes jbje-turn { 0%, 58%, 70%, 100% { opacity: 0; transform: translateX(0); } 61%, 67% { opacity: 1; transform: translateX(-2px); } }
@keyframes jbje-thinking { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes jbje-mouth { 0%,100% { transform: rotate(-3deg) scaleY(.45); } 50% { transform: rotate(-3deg) scaleY(1.7); } }

@media (max-width: 980px) {
  .jbje-entry-link { width: 100%; justify-content: center; }
  .jbje-primary-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jbje-guide { grid-template-columns: 176px minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .jbje-experience { align-items: start; padding: 72px 20px 34px; }
  .jbje-experience::before { inset: 8px; }
  .jbje-experience__scene { background-position: center 40%; background-size: auto 82%; }
  .jbje-experience h2 { font-size: clamp(52px, 18vw, 78px); }
  .jbje-experience__content > p:not(.jbje-eyebrow) { margin-block: 18px 22px; font-size: 15px; }
  .jbje-primary-routes { grid-template-columns: 1fr; gap: 8px; }
  .jbje-primary-routes a { min-height: 46px; }
  .jbje-secondary-routes { font-size: 14px; }
  .jbje-guide-prompt { flex-direction: column; }
  .jbje-close { top: 16px; right: 16px; }
  .jbje-guide-launcher { right: 12px; bottom: 24px; min-height: 52px; padding-right: 14px; }
  .jbje-guide-launcher img { width: 42px; height: 42px; }
  .jbje-guide-launcher.is-compact { width: 52px; min-width: 52px; height: 52px; min-height: 52px; padding: 4px; }
  .jbje-guide-launcher.is-compact img { width: 42px; height: 42px; }
  .jbje-guide {
    inset: 8px;
    width: auto;
    max-height: none;
    grid-template-columns: 1fr;
    grid-template-rows: 148px auto;
  }
  .jbje-guide__visual { border-right: 0; border-bottom: 1px solid rgba(194,160,106,.2); }
  .jbje-monkey { right: 0; width: 100%; height: 150%; transform: translateY(34%); }
  .jbje-guide__content { padding: 25px 20px 28px; }
  .jbje-monkey-mouth { top: 43%; left: 57%; }
  .jbje-guide__transcript { max-height: 180px; }
  .jbje-guide__choices { grid-template-columns: 1fr; }
  .jbje-guide h2 { font-size: 48px; }
  .jbje-guide h3 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .jbje-experience__scene,
  .jbje-mist,
  .jbje-dragonfly,
  .jbje-monkey { animation: none !important; transition: none !important; transform: none !important; }
  .jbje-monkey--blink,
  .jbje-monkey--turn,
  .jbje-monkey-mouth { display: none; }
}
