/* ═══════════════════════════════════════════════════════════════
   BALIYANG — Shared Stylesheet
   Zhang Family Office
═══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #18160f;
  --ink-mid:    #2e2b22;
  --ink-light:  #4a4639;
  --mist:       #f4f1eb;
  --stone:      #e9e4da;
  --sage:       #6b7c62;
  --gold:       #8a7050;
  --gold-pale:  #b8a07a;
  --rule:       rgba(24,22,15,0.12);
  --rule-light: rgba(24,22,15,0.07);
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--mist);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ─── NAV ────────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3.5rem;
  transition: border-color 0.5s, background 0.5s;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(244,241,235,0.96);
  border-color: var(--rule);
  backdrop-filter: blur(8px);
}

.nav-wordmark {
  font-family: 'Cormorant SC', serif;
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  list-style: none;
}
.nav-links > li > a {
  font-family: 'Cormorant SC', serif;
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-light);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--gold); }

/* ── Dropdown ──────────────────────────────────────────────── */
.dropdown { position: relative; }

.dropdown-toggle { cursor: default; }

/* invisible bridge fills the gap so cursor moving down doesn't break hover */
.dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  height: 1.4rem;
  display: none;
}
.dropdown:hover::after { display: block; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 1.2rem);
  right: -1.5rem;
  background: var(--mist);
  border: 1px solid var(--rule);
  min-width: 260px;
  padding: 0.5rem 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* stay open when hovering the toggle OR the menu */
.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.dropdown-menu li { list-style: none; }

/* each subsidiary is one full-width <a> with big hit area */
.dropdown-menu a {
  display: block;
  padding: 0.85rem 1.6rem;
  text-decoration: none;
  transition: background 0.15s;
  border-bottom: 1px solid var(--rule-light);
}
.dropdown-menu li:last-child a { border-bottom: none; }
.dropdown-menu a:hover { background: var(--stone); }

.dd-name {
  display: block;
  font-family: 'Cormorant SC', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
  transition: color 0.15s;
}
.dd-desc {
  display: block;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--gold-pale);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.dropdown-menu a:hover .dd-name { color: var(--gold); }

/* ─── PAGE HERO (interior pages) ─────────────────────────────── */
.page-hero {
  padding: 13rem 3.5rem 5.5rem;
  border-bottom: 1px solid var(--rule);
}
.page-kicker {
  font-family: 'Cormorant SC', serif;
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--gold-pale);
  text-transform: uppercase;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.7s 0.15s forwards;
}
.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--ink);
  opacity: 0;
  animation: fadeUp 0.8s 0.3s forwards;
}
.page-title em { font-style: normal; color: inherit; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule);
  padding: 2.2rem 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-mark {
  font-family: 'Cormorant SC', serif;
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--gold-pale);
  text-transform: uppercase;
}
.footer-copy {
  font-size: 0.75rem;
  font-family: 'EB Garamond', serif;
  color: var(--gold-pale);
  letter-spacing: 0.03em;
}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay classes — apply alongside .reveal for grouped elements */
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.22s; }
.reveal-d3 { transition-delay: 0.34s; }
.reveal-d4 { transition-delay: 0.46s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }
  .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { transition-delay: 0s !important; }
}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 1.25rem 1.5rem; }
  .page-hero { padding: 9rem 1.5rem 4rem; }
  footer { flex-direction: column; gap: 0.6rem; padding: 1.8rem 1.5rem; text-align: center; }
  .nav-links { gap: 1.8rem; }
  .dropdown-menu { right: -1rem; min-width: 220px; }
}

/* Headings: no italic accent, titles read as one voice */
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }

/* ─── MOBILE NAV ─────────────────────────────────────────────── */
/* Hidden above 768px; the media query below swaps .nav-links for it. */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--ink);
}
.hamburger span {
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;                 /* under the nav (100) so the toggle stays clickable */
    background: var(--mist);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    padding: 5rem 1.5rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu .mm-group {
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    color: var(--gold-pale, var(--gold));
    margin-bottom: -1.4rem;
}

/* Must come after the .hamburger component above: same specificity, so source
   order decides. Putting this in an earlier @media block let `display:none`
   win and the toggle never appeared. */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
}

/* ─── MOBILE NAV: solid, not translucent ─────────────────────── */
/* Scrolled, the nav was rgba(...,0.96) + blur(8px). On a phone that is enough
   for page text to ghost through the bar, so it never reads as attached to the
   section beneath. Matching the section colour exactly, with no blur, makes the
   bar and the page read as one surface. Desktop keeps the translucent version. */
@media (max-width: 768px) {
    nav#main-nav.scrolled {
        background: var(--mist);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Menu open: the overlay is light, so a dark-hero nav has to drop its light
   colours or the X and the wordmark disappear into it. Measured 1.0 contrast
   against the overlay before this existed. */
nav#main-nav.menu-open {
    background: var(--mist);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}