/* Brand layer for the Bazi AI copy pass. The original pixel layout stays intact. */
.bazi-brand {
  align-items: center;
  display: inline-flex;
  gap: 9px;
  margin-right: 14px;
  min-width: 0;
  white-space: nowrap;
}

.bazi-brand-mark {
  display: block;
  flex: 0 0 28px;
  height: 28px;
  overflow: hidden;
  position: relative;
  width: 28px;
}

.bazi-brand-mark img {
  height: 28px !important;
  left: 0;
  max-width: none !important;
  object-fit: none !important;
  position: absolute;
  top: 0;
  width: 218px !important;
}

.bazi-brand-name {
  font-family: "Fusion Pixel 12px Mono zh_hans", ui-monospace, monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.bazi-brand-type {
  color: rgba(255, 255, 255, 0.62);
  font-family: "Fusion Pixel 12px Mono zh_hans", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.bazi-footer-brand {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}

.bazi-footer-mark {
  display: block;
  flex: 0 0 28px;
  height: 24px;
  overflow: hidden;
  position: relative;
  width: 28px;
}

.bazi-footer-mark img {
  height: 24px !important;
  left: 0;
  max-width: none !important;
  object-fit: none !important;
  position: absolute;
  top: 0;
  width: 147px !important;
}

.bazi-footer-brand-name {
  font-family: "Fusion Pixel 12px Mono zh_hans", ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.bazi-footer-cta-copy {
  align-items: center;
  background: #fff;
  color: #111;
  display: inline-flex;
  font-family: "Fusion Pixel 12px Mono zh_hans", monospace;
  font-size: 14px;
  height: 46px;
  justify-content: center;
  line-height: 1;
  min-width: 100px;
  padding: 0 12px;
  white-space: nowrap;
}

.bazi-footer-cta-copy::after {
  content: ">";
  font-family: monospace;
  font-size: 18px;
  line-height: 1;
  margin-left: 6px;
}

.bazi-entry-copy {
  align-items: center;
  background: #050505;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  font-family: "Fusion Pixel 12px Mono zh_hans", monospace;
  font-size: clamp(12px, 1.55vw, 22px);
  inset: 0;
  justify-content: center;
  line-height: 1;
  position: absolute;
  text-shadow: -2px 3px 0 #000;
  white-space: nowrap;
}

.bazi-entry-copy--wide {
  font-size: clamp(11px, 1.3vw, 19px);
}

.bazi-detail-copy {
  align-items: center;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  font-family: "Fusion Pixel 12px Mono zh_hans", monospace;
  font-size: 14px;
  inset: 0;
  justify-content: center;
  line-height: 1;
  position: absolute;
  text-shadow: -1px 2px 0 #000;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .bazi-entry-copy {
    font-size: 14px;
  }

  .bazi-entry-copy--wide {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .bazi-brand {
    gap: 7px;
    margin-right: 0;
  }

  .bazi-brand-name {
    font-size: 13px;
  }

  .bazi-brand-type {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-bazi-copy] {
    scroll-behavior: auto;
  }
}

/* Latin and kana copy runs roughly twice as wide as the Chinese original at
   the same size. The pixel buttons keep their artwork-derived box, so the
   type steps down instead of the box growing. */
html[data-xh-locale="en"] .bazi-entry-copy,
html[data-xh-locale="ja"] .bazi-entry-copy {
  font-size: clamp(10px, 1.05vw, 15px);
}

html[data-xh-locale="en"] .bazi-entry-copy--wide,
html[data-xh-locale="ja"] .bazi-entry-copy--wide {
  font-size: clamp(9px, 0.92vw, 13px);
}

html[data-xh-locale="en"] .bazi-detail-copy,
html[data-xh-locale="ja"] .bazi-detail-copy {
  font-size: 12px;
}

html[data-xh-locale="en"] .bazi-footer-cta-copy,
html[data-xh-locale="ja"] .bazi-footer-cta-copy {
  font-size: 13px;
}

@media (max-width: 767px) {
  html[data-xh-locale="en"] .bazi-entry-copy,
  html[data-xh-locale="ja"] .bazi-entry-copy {
    font-size: 11px;
  }

  html[data-xh-locale="en"] .bazi-entry-copy--wide,
  html[data-xh-locale="ja"] .bazi-entry-copy--wide {
    font-size: 9px;
  }
}

/* The source header is a justify-between row whose nav collapses to zero width
   on small screens; without this the switcher floats into the middle instead
   of grouping with the menu button. */
header .xh-lang {
  margin-left: auto;
}

/* The source nav uses an 80px gap that only fits a four-item Chinese menu on a
   wide screen. English and Japanese labels are longer, and the language
   switcher now shares the row, so the gap and the brand step down before the
   burger breakpoint takes over at 767px. */
@media (max-width: 1180px) {
  .bazi-brand-type {
    display: none;
  }

  header > div > nav {
    gap: 2rem;
  }
}

@media (max-width: 950px) {
  header > div > nav {
    font-size: 14px;
    gap: 1.15rem;
  }

  .bazi-brand-name {
    font-size: 13px;
  }
}