/* mobile-nav.css — Refined editorial mobile navigation shared across all pages */
/* Hide mobile-only CTA block on desktop (overridden inside @media below) */
.nav-mobile-cta{display:none!important}
.btn-mobile-login{display:none!important}

/* Uses !important on critical layout props to override any legacy inline styles */

@media(max-width:900px){
  /* P0 fix: .nav's backdrop-filter creates a containing block for fixed descendants,
     which imprisoned the full-screen drawer inside the 64px nav bar.
     Kill the filter and give the bar a solid near-opaque background instead. */
  .nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(10,9,8,0.97)!important}
  /* Keep the brand area clickable above the open drawer */
  .brand{position:relative;z-index:101}
  .nav-mobile-cta{display:flex!important}
  .btn-mobile-login{display:inline-flex!important}
  .nav-inner{padding:0 20px!important;gap:10px!important}
  .nav-user{display:none!important}

  nav.nav .nav-links,
  .nav .nav-links{
    position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
    flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
    background:rgba(8,7,6,0.98)!important;
    backdrop-filter:blur(32px) saturate(1.4)!important;
    -webkit-backdrop-filter:blur(32px) saturate(1.4)!important;
    padding:100px 36px 48px!important;gap:0!important;
    transform:translateY(-100%)!important;opacity:0!important;pointer-events:none!important;
    transition:transform 0.6s cubic-bezier(0.16,1,0.3,1),opacity 0.4s ease!important;
    display:flex!important;z-index:99!important;overflow-y:auto!important;
    border:none!important;border-radius:0!important;width:auto!important;height:auto!important;
    max-width:none!important;margin:0!important;
  }
  nav.nav .nav-links.open,
  .nav .nav-links.open,
  .nav-inner:has(.nav-toggle.open) .nav-links{
    transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important;
  }
  nav.nav .nav-links::before,
  .nav .nav-links::before{
    content:''!important;position:absolute!important;top:5%!important;right:-15%!important;
    width:500px!important;height:500px!important;left:auto!important;bottom:auto!important;
    background:radial-gradient(closest-side,rgba(255,91,46,0.08),transparent 65%)!important;
    border-radius:50%!important;pointer-events:none!important;filter:none!important;
    transform:none!important;
    animation:navGlow 6s ease-in-out infinite alternate!important;
    border:none!important;
  }
  nav.nav .nav-links::after,
  .nav .nav-links::after{
    content:''!important;position:absolute!important;inset:0!important;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E")!important;
    pointer-events:none!important;opacity:0.5!important;
    width:auto!important;height:auto!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
    border:none!important;border-radius:0!important;transform:none!important;filter:none!important;
  }
  @keyframes navGlow{
    0%{opacity:0.4;transform:translate(0,0) scale(0.9)}
    100%{opacity:1;transform:translate(-40px,30px) scale(1.15)}
  }
  nav.nav .nav-links > a,
  .nav .nav-links > a{
    font-family:var(--serif)!important;font-size:34px!important;font-weight:400!important;
    color:rgba(242,239,234,0.45)!important;
    padding:14px 0!important;border:none!important;width:100%!important;max-width:440px!important;
    text-align:left!important;letter-spacing:-0.02em!important;
    font-variation-settings:'opsz' 144!important;
    transition:color 0.35s var(--ease),transform 0.35s var(--ease)!important;
    position:relative!important;opacity:0;transform:translateY(28px);
    display:flex!important;align-items:baseline!important;gap:18px!important;
    border-radius:0!important;background:transparent!important;
    border-bottom:none!important;
  }
  nav.nav .nav-links > a::before,
  .nav .nav-links > a::before{
    content:attr(data-num)!important;
    font-family:var(--mono)!important;font-size:11px!important;font-weight:500!important;
    color:rgba(255,91,46,0.4)!important;letter-spacing:0.1em!important;
    opacity:0;transform:translateX(-10px);
    transition:opacity 0.3s var(--ease),transform 0.3s var(--ease),color 0.3s var(--ease)!important;
    flex-shrink:0!important;width:28px!important;
    position:static!important;left:auto!important;bottom:auto!important;right:auto!important;
    height:auto!important;background:none!important;border:none!important;border-radius:0!important;
    transform-origin:left center!important;
  }
  nav.nav .nav-links.open > a,
  .nav .nav-links.open > a{
    animation:navLinkIn 0.6s cubic-bezier(0.16,1,0.3,1) forwards!important;
  }
  /* Direct child a tags only */
  nav.nav .nav-links > a:nth-child(1),
  .nav .nav-links > a:nth-child(1){animation-delay:0.10s!important}
  nav.nav .nav-links > a:nth-child(2),
  .nav .nav-links > a:nth-child(2){animation-delay:0.17s!important}
  nav.nav .nav-links > a:nth-child(3),
  .nav .nav-links > a:nth-child(3){animation-delay:0.24s!important}
  nav.nav .nav-links > a:nth-child(4),
  .nav .nav-links > a:nth-child(4){animation-delay:0.31s!important}
  nav.nav .nav-links > a:nth-child(5),
  .nav .nav-links > a:nth-child(5){animation-delay:0.38s!important}
  @keyframes navLinkIn{to{opacity:1;transform:translateY(0)}}
  nav.nav .nav-links > a:hover,
  nav.nav .nav-links > a.active,
  .nav .nav-links > a:hover,
  .nav .nav-links > a.active{
    color:var(--paper)!important;transform:translateX(6px)!important;
    letter-spacing:-0.02em!important;background:transparent!important;
  }
  nav.nav .nav-links > a:hover::before,
  nav.nav .nav-links > a.active::before,
  .nav .nav-links > a:hover::before,
  .nav .nav-links > a.active::before{
    opacity:1!important;transform:translateX(0)!important;color:var(--ember)!important;
  }
  nav.nav .nav-links > a::after,
  .nav .nav-links > a::after{
    display:none!important;
    content:none!important;
  }
  .nav-mobile-cta{
    margin-top:48px!important;padding-top:32px!important;
    border-top:1px solid rgba(58,51,43,0.4)!important;
    width:100%!important;max-width:440px!important;
    opacity:0;transform:translateY(20px);
    animation:navLinkIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.48s forwards!important;
    display:flex!important;flex-direction:column!important;gap:14px!important;
    position:relative!important;
  }
  .nav-mobile-cta .btn-mobile-login{
    font-family:var(--mono)!important;font-size:11px!important;
    color:var(--paper)!important;border:1px solid rgba(255,91,46,0.6)!important;
    padding:15px 24px!important;border-radius:6px!important;
    letter-spacing:0.12em!important;text-transform:uppercase!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
    font-weight:600!important;cursor:pointer!important;background:transparent!important;
    transition:all 0.3s var(--ease)!important;
    width:100%!important;max-width:none!important;
  }
  .nav-mobile-cta .btn-mobile-login:hover{
    background:var(--ember)!important;color:var(--ink)!important;border-color:var(--ember)!important;
    box-shadow:0 4px 24px var(--ember-glow)!important;
  }
  .nav-mobile-cta .btn-mobile-login svg{width:16px!important;height:16px!important}
  .nav-mobile-cta .nav-mobile-tag{
    font-family:var(--mono)!important;font-size:10px!important;color:rgba(242,239,234,0.3)!important;
    letter-spacing:0.08em!important;text-align:center!important;text-transform:uppercase!important;
  }
  .nav-toggle{
    display:flex!important;z-index:101!important;position:relative!important;
    width:40px!important;height:40px!important;border-radius:8px!important;
    transition:background 0.2s var(--ease)!important;
    align-items:center!important;justify-content:center!important;gap:5px!important;
    flex-direction:column!important;background:transparent!important;border:none!important;
    cursor:pointer;padding:0!important;
  }
  .nav-toggle:hover{background:rgba(255,255,255,0.06)!important}
  .nav-toggle.open:hover{background:rgba(255,91,46,0.08)!important}
  .nav-toggle span{
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1)!important;
    background:var(--paper)!important;display:block!important;
    width:22px!important;height:1.5px!important;border-radius:2px!important;
    margin:0!important;
  }
  .nav-toggle.open span{background:var(--ember)!important}
  .nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)!important;width:20px!important}
  .nav-toggle.open span:nth-child(2){opacity:0!important;transform:scaleX(0)!important}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)!important;width:20px!important}
  .btn-nav,.btn-login-header{display:none!important}
  .brand-tag{display:none!important}
  body.nav-open{overflow:hidden!important}
}