/* =============================================================
   Luxury Unlocked — exact React nav shell from ZIP nav.jsx
   ============================================================= */
:root {
  --paper: #FAF7F0;
  --paper-2: #F1EADC;
  --paper-3: #EAE1CF;
  --ink: #211C15;
  --ink-soft: #463F34;
  --muted: #8A7F6E;
  --line: rgba(33,28,21,.16);
  --line-soft: rgba(33,28,21,.08);
  --accent: #C49A4C;
  --accent-deep: #6E4E18;
  --dark: #1C1813;
  --dark-2: #252017;
  --on-dark: #F2EBDC;
  --on-dark-muted: #A99E89;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw: 1300px;
  --gut: clamp(20px,5.2vw,72px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --navh: 92px;
}

.lu-nav,
.lu-nav * {
  box-sizing: border-box;
}

.lu-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: var(--on-dark);
  background: transparent;
  transition:
    background .5s var(--ease),
    box-shadow .5s var(--ease),
    color .5s var(--ease);
}

.lu-nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: var(--navh);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height .5s var(--ease);
}

.lu-nav.scrolled {
  --navh: 74px;
  background: rgba(250,247,240,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}

.lu-brand {
  display: flex;
  align-items: center;
  line-height: 1;
  text-align: left;
}

.lu-brand-logo {
  height: 54px;
  width: auto;
  display: block;
  transition: filter .5s var(--ease);
}

.lu-nav:not(.scrolled) .lu-brand-logo {
  filter: drop-shadow(0 1px 8px rgba(0,0,0,.35));
}

.lu-nav.scrolled .lu-brand-logo {
  filter: brightness(.86) saturate(1.12);
}

@media (max-width:560px) {
  .lu-brand-logo {
    height: 46px;
  }
}